Vue.js框架--双向数据绑定实现todolist简单应用（六）

主要操作技能：

      1.双向数据绑定MVVM

      2.使用数组，再用v-for循环数据

      3.数组中的splice() 方法

     

     要实现 http://www.todolist.cn这个效果！

编写代码:

<template>
	<div id="app">
		<!--v-model绑定数据 -->
		<input type="text" v-model="todo" />
		<button @click="doAdd()">add</button><br />
		<hr />
		<br /><br />
		<ul>
			<li v-for="(item,key) in list">
				<!--传入索引值-->
				{{item}} --<button @click="doDel(key)">del</button>
			</li>
		</ul>

	</div>
</template>

<script>
	export default {
		name: 'app',
		data() { //业务逻辑的数据
			return {
				todo: '', //存放文本的值
				list: [] //数组存放数据
			}
		},
		methods: {
			doAdd() { //添加方法
				//alert("aa");
				//1.获取文本框的值
				//2.将文本值push到list中
				this.list.push(this.todo);
				//清空
				this.todo='';
			},
			doDel(data){ //删除方法
//				alert(data);
      //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
      //第一个参数是：指定删除的索引 ； 第二个参数是: 要删除的数目 （如果设置为 0，则不会删除项目）
         this.list.splice(data,1);
			}
		}
	}
</script>

效果：

初始化页面

点击add按钮，添加数据哦！

单击del按钮，就能删除哦！