【Vue】案例——To do list：
【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>