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

﹏ヽ暗。殇╰゛Y 2024-02-18 23:25 13阅读 0赞

**主要操作技能：**

1.双向数据绑定MVVM

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

3.数组中的splice() 方法

![70][]

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

![70 1][]

**编写代码:**

<template>
    	<div id="app">
    		
    		<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>

**效果：**

初始化页面

![70 2][]

![70 3][]

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

![70 4][]

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

![70 5][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/886b334ed8fd4664a88bb6034988737f.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/17f2a882992741ea950cb2981f50c9b6.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9980b7181d8c4b3d9d2eb6ebfae0869c.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a425212e015c4d748537248a5d91ee14.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0e9dcc31d39f40e59fe5edcf198e73d6.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5e47cb55e3df46a79c5297e2a01a0fe9.png