当前位置：首页 > news >正文

【Vue】案例——To do list：

news 来源：原创 2025/9/13 5:09:52

【Vue】案例——To do list：

一、案例介绍：
二、效果展示（如图）
三、主要功能：
四、技术要点：
- - 补充：【Vue】Vue模板语法(点击可跳转)
  - 补充：【Vue】数据绑定（单双向）(点击可跳转)
五、代码解析：
- - 1.body部分
  - 2.script部分
  - 3.CSS样式部分

一、案例介绍：

这个案例是一个简单的待办事项列表（To Do List）应用，使用了 Vue.js 框架来实现动态数据绑定和交互功能。用户可以在输入框中输入待办事项，并通过点击“增加”按钮将其添加到列表中。待办事项会以列表的形式展示在页面上，用户还可以通过点击“删除”链接来移除特定的事项。

二、效果展示（如图）

在这里插入图片描述

三、主要功能：

1.添加待办事项：用户输入内容并点击“增加”按钮，内容会被添加到待办事项数组中；
2.删除待办事项：用户可以点击每个事项旁边的“删除”链接来移除该事项；
3.输入验证：在添加事项时，应用会检查输入是否为空或是否已存在于列表中，并给出相应的提示；

四、技术要点：

1.使用 Vue.js 进行数据绑定和事件处理；
2.利用 v-model 指令实现输入框与数据的双向绑定；
3.使用 v-for 指令动态渲染待办事项列表；

补充：【Vue】Vue模板语法(点击可跳转)

补充：【Vue】数据绑定（单双向）(点击可跳转)

五、代码解析：

1.body部分

在这里插入图片描述

<body><div id='app'><div class="box"><!-- 如何获取输入框内容，如何将获取到的内容展示到页面上 【将内容保存到数组中去】--><h3>To do list</h3><div class="list_con"><input type="text" v-model="txt"><button @click="add()">增加</button></div><div class="list"><!-- 连续出现的标签、标签块1.将标签、标签块重写一遍2.将重复出现的标签、标签块里面的“内容”保存到数组中去3.将v-for写在重复出现标签、标签块身上--><ul><li v-for="item in arr"><span>{{item}}</span><!-- 点击删除时候如何指定元素 --><a href="javascript:;" @click="del(index)">删除</a></li></ul></div></div></div></body>

2.script部分

在这里插入图片描述

<script>new Vue({el: '#app',data: {txt: "",    // 保存input框的内容arr: ["学习html", "学习css", "学习javascript"]},methods: {// 增加功能add() {// this.txt    // 输入框输入的内容// push:将内容添加到数组最后一项   pop:删除数组最后一项// unshift:将内容添加到数组最前面一项   shift:删除数组最前面一项if (this.txt.trim() == '') {alert("请输入内容，再进行添加！")return} else if (this.arr.includes(this.txt.trim())) {alert("该内容已存在，请重新输输入其他内容")this.txt = ''} else {this.arr.unshift(this.txt)this.txt = ''}},// 删除功能// 定义函数给形参，调用函数给实参del(index) {// splice(操作的元素的索引值，删除个数，添加的内容)this.arr.splice(index, 1);}}})
</script>

3.CSS样式部分

在这里插入图片描述

    <style>.box {margin: 10px auto;width: 600px;}.list_con input {width: 540px;}.list ul {padding: 0;}.list li {list-style: none;border-bottom: 1px solid #ccc;padding: 15px 0;}.list li a {float: right;text-decoration: none;}</style>

案例——To do list整体代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>To do list2</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><style>.box {margin: 10px auto;width: 600px;}.list_con input {width: 540px;}.list ul {padding: 0;}.list li {list-style: none;border-bottom: 1px solid #ccc;padding: 15px 0;}.list li a {float: right;text-decoration: none;}</style>
</head><body><div id='app'><div class="box"><!-- 如何获取输入框内容，如何将获取到的内容展示到页面上 【将内容保存到数组中去】--><h3>To do list</h3><div class="list_con"><input type="text" v-model="txt"><button @click="add()">增加</button></div><div class="list"><!-- 连续出现的标签、标签块1.将标签、标签块重写一遍2.将重复出现的标签、标签块里面的“内容”保存到数组中去3.将v-for写在重复出现标签、标签块身上--><ul><li v-for="item in arr"><span>{{item}}</span><!-- 点击删除时候如何指定元素 --><a href="javascript:;" @click="del(index)">删除</a></li></ul></div></div></div></body>
<script>new Vue({el: '#app',data: {txt: "",    // 保存input框的内容arr: ["学习html", "学习css", "学习javascript"]},methods: {// 增加功能add() {// this.txt    // 输入框输入的内容// push:将内容添加到数组最后一项   pop:删除数组最后一项// unshift:将内容添加到数组最前面一项   shift:删除数组最前面一项if (this.txt.trim() == '') {alert("请输入内容，再进行添加！")return} else if (this.arr.includes(this.txt.trim())) {alert("该内容已存在，请重新输输入其他内容")this.txt = ''} else {this.arr.unshift(this.txt)this.txt = ''}},// 删除功能// 定义函数给形参，调用函数给实参del(index) {// splice(操作的元素的索引值，删除个数，添加的内容)this.arr.splice(index, 1);}}})
</script></html>

【Vue】案例——To do list：

一、案例介绍：

二、效果展示（如图）

三、主要功能：

四、技术要点：

五、代码解析：

1.body部分

2.script部分

3.CSS样式部分

相关文章：