vue——两种方式实现列表动态添加和删除
下面将介绍两种方式实现动态添加和删除列表
1.不使用组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - vue实现列表增加和删除</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newAddText" placeholder="请输入要添加的内容" />
<button @click="addNewList">添加</button>
<ul>
<li v-for="(list,index) in lists" v-bind:key="list.id">
{{list.title}} <button v-on:click="lists.splice(index, 1)">删除</button>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
newAddText:"",
lists:[
{id:1,title:"手机号码"},
{id:2,title:"qq号"},
{id:3,title:"姓名"},
],
nextTodoId: 4
},
methods:{
addNewList:function(){
this.lists.push({
id:this.nextTodoId++,
title:this.newAddText
})
this.newAddText=""
}
}
})
</script>
</body>
</html>初始界面：声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： vue和Jquery差别之动态添加删除元素
- 下一篇： 数组的几种定义方式及初始化
copyright © 2008-2019 亿联网络 版权所有 备案号：粤ICP备14031511号-2