Vue简单入门 实现添加删除实例
首先创建一个Vue实例 ,并引入vue
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let zyy = new Vue({
el: "#app",
data() {
return {
}
},
})
</script>
需要实现的效果为点击删除按钮删除当前的一项,通过输入框输入内容点击添加,添加到列表中。效果图如下。
删除实现思路:先为按钮绑定点击事件,获取到数组中当前点击的下标,用splice()方法实现删除。代码如下。
<div id="app">
<ul>
<li v-for="(item,i) in list">
{{item.id}}
<a :href="'zyy.html?id='+item.id">{{item.name}} </a>
<button @click="del(i)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let zyy = new Vue({
el: "#app",
data() {
return {
list: [
{ id: 1001, name: 'zyy' },
{ id: 1002, name: 'zdd' },
{ id: 1003, name: 'zcc' },
]
}
},
methods: {
del(i) {//根据获取到当前下标删除
this.list.splice(i, 1)
}
}
})
</script>
添加实现思路:根据v-model实现数据双向绑定,添加按钮获取到绑定的数据,通过push方法添加到数组中。最终代码如下。
<div id="app">
<input type="text" v-model="name">
<button @click="add"> 添加 </button>
<ul>
<li v-for="(item,i) in list">
{{item.id}}
<a :href="'zyy.html?id='+item.id">{{item.name}} </a>
<button @click="del(i)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
name:'',
list: [
{ id: 1001, name: 'zyy' },
{ id: 1002, name: 'zdd' },
{ id: 1003, name: 'zcc' },
]
}
},
methods: {
del(i) {
this.list.splice(i, 1)
},
add(){
this.list.push({
id:+new Date,
name:this.name
}),
this.name=''
}
},
})
</script>
注释:添加方法中的’ id:+new Date’是生成当前时间,为避免id重复。
this.name=’'为了每次添加后清空输入框,让name为空。