vue——两种方式实现列表动态添加和删除

创建时间：2017-12-21 投稿人：浏览次数：93

下面将介绍两种方式实现动态添加和删除列表

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>

初始界面：

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

热门文章: vue——使用插槽分发内容 ...

最新文章: vue——两种方式实现列表动...