注意this的指向問題，和v-model的雙向數據綁定問題 ，以及some()和splice()方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='id'>
<input type="text" v-model='name'>
<input type="button" value="添加" @click='add'>
<p v-for="item in list" :key="item.id">{{item.id}}---{{item.name}}
<a href="" @click.prevent='del(item.id)'>刪除</a>
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[{id:1,name:'張三'},
{id:2,name:'李四'},
{id:3,name:'王五'}]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name}); },
del(id){
this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1);
}
});
}
}
});
</script>
</body>
</html>
