主要操作技能:
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按钮,就能删除哦!