<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<!--容器-->
<div id="app">
<h1>添加</h1>
<span>id:</span>
<input type="text" v-model="id">
<span>name:</span>
<input type="text" v-model="name">
<input type="button" @click="add" value="添加">
<br><hr>
<li v-for="i of list">
{{i.id}} {{i.name}}
<a href="" @click.prevent="del(i.id)">删除</a>
</li>
</div>
<script>
// 创建一个vue实例
var vm=new Vue({
el:'#app', // 绑定id为appid容器
data:{
id:"",
name:"",
list:[
{id:1,name:"宝马"},
{id:2,name:"奔驰"}
]
},
methods:{
add(){
var item={id:this.id,name:this.name};
this.list.push(item);
this.id="";
this.name="";
},
del(id){
_this=this;
this.list.some(function (item,index) {
if(item.id==id){
_this.list.splice(index,1);
return true;
}
})
}
}
})
</script>
</body>
</html>效果：
