剛發完Vue.js(2)----常用指令,做個實例鞏固一下，來實現對數組的增加和刪除的效果。
樣式就省略不說，感興趣的可以評論。
首先實現輸入框，下拉框和提交，實現增加人員信息功能。
<div class="addUser">
姓名：<input type="text" name="name" v-model="newUser.name">
年齡：<input type="text" name="age" v-model="newUser.age">
性別：<select v-model="newUser.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button @click="createUser">提交</button>
</div>
@click 是 v-on:click的縮寫形式，當點擊提交按鈕時，觸發的是createUser()函數
createUser:function () {
this.users.push(this.newUser);
this.newUser = {name:'',age:0,sex:'Male'}
}
下面是三組原始數據：
<div class="delUser">
<table>
<thead>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>刪除</td>
</thead>
<tbody>
<tr v-for='(user,index) in users'>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button @click="deleteUser(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
原始數據存儲在model層，如下：
new Vue({
el:"#view",
data:{
newUser:{
name:'',
age:0,
sex:'男'
},
users:[
{
name:'王臨風',
age:20,
sex:'男'
},{
name:"王頑皮",
age:20,
sex:'女'
},{
name:"盧大美",
age:20,
sex:'女'
}
]
},
點擊刪除按鈕，調用deleteUser()函數，為了能夠刪除指定的數組元素，所以在遍歷users查找user時，應該同時給每一個元素一個特定的參數。v-for=('user,index') in users，這樣在執行 deleteUser()時就可以將index作為參數代入到函數中。
deleteUser:function(index){
console.log(index);
this.users.splice(index,1);
}
splice(index，num，item)方法是刪除數組中指定位置的元素，第一個參數是指定從數組中的哪個位置開始刪除元素，第二個參數是指定刪除幾個元素。第三個參數是可以向數組添加元素，并返回新的數組。
好啦，逐步分析如上。有建議或疑問可以發在評論中哦！如果看到了這里，記得點個喜歡哦！每一個人的支持對我都是莫大的鼓勵！下面放一個全部的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加刪除信息</title>
<style type="text/css">
fieldset{
display: block;
border: 1px solid #bcbcbc;
width: 50%;
margin: 0 auto;
padding: 15px;
}
legend{
font-size: 8px;
}
input{
height: 20px;
}
select{
width: 60px;
}
button{
border: none;
background:#009A61;
color:white;
width:70px;
border: 1px solid #009A61;
border-radius: 4px;
margin-left: 20px;
line-height: 20px;
}
table{
margin-top: 40px;
width: 100%;
text-align: center;
border-collapse:collapse;
}
thead,td,tr{
border: 1px solid #bcbcbc;
line-height: 35px;
}
thead td{
background: #009A61;
color: white;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="view">
<fieldset>
<legend>人員管理</legend>
<div class="addUser">
姓名：<input type="text" name="name" v-model="newUser.name">
年齡：<input type="text" name="age" v-model="newUser.age">
性別：<select v-model="newUser.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button @click="createUser">提交</button>
</div>
<div class="delUser">
<table>
<thead>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>刪除</td>
</thead>
<tbody>
<tr v-for='(user,index) in users'>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button @click="deleteUser(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</div>
<script>
new Vue({
el:"#view",
data:{
newUser:{
name:'',
age:0,
sex:'男'
},
users:[
{
name:'王臨風',
age:20,
sex:'男'
},{
name:"王頑皮",
age:20,
sex:'女'
},{
name:"盧大美",
age:20,
sex:'女'
}
]
},
methods:{
createUser:function () {
this.users.push(this.newUser);
this.newUser = {name:'',age:0,sex:'Male'}
},
deleteUser:function(index){
console.log(index);
this.users.splice(index,1);
}
}
})
</script>
</html>
