溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一.案例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue指令綜合案例</title>
<style>
#app{
margin: 50px auto;
width: 620px;
}
fieldset{
border: 2px solid plum;
margin-bottom: 20px;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 620px;
border: 2px solid plum;
text-align: center;
}
thead{
background-color: plum;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>學生錄入系統</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="請輸入姓名" v-model="student.name"/>
<span></span>
</div>
<div>
<span>年齡：</span>
<input type="text" placeholder="請輸入年齡" v-model="student.age"/>
</div>
<div>
<span>性別：</span>
<select v-model="student.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>QQ：</span>
<input type="text" placeholder="請輸入QQ" v-model="student.QQ"/>
</div>
<button @click="createNewStudent()">創建新用戶</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>QQ</td>
<td>刪除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.QQ}}</td>
<td><button @click="deleteStudentMsg(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//1.創建Vue的實例
let vm=new Vue({
el:'#app',
data:{
persons:[
{name:'張三',age:16,sex:'男',QQ:'123456'},
{name:'李四',age:17,sex:'男',QQ:'100000'},
{name:'王麻子',age:18,sex:'女',QQ:'666666'},
{name:'趙六',age:19,sex:'男',QQ:'888888'},
{name:'劉七',age:20,sex:'女',QQ:'999999'}
],
student:{name:'',age:0,sex:'男',QQ:''}
},
methods:{
//創建一條新記錄
createNewStudent(){
//姓名不能為空
if(this.student.name==''){
alert('姓名不能為空');
return;
}
//年齡不能小于0
if(this.student.age<0){
alert('請輸入正確年齡');
return;
}
//QQ
if(this.student.age==''){
alert('請輸入正確年齡');
return;
}
//往數組中添加一條新記錄
this.persons.unshift(this.student);
//清空數據
this.student={name:'',age:0,sex:'男',QQ:''};
},
//刪除
deleteStudentMsg(index){
this.persons.splice(index,1);
}
}
});
</script>
</body>
</html>
二.結果
總結
以上所述是小編給大家介紹的vue實現學生錄入系統之添加刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
