Vue指令的综合案例
参考文献：
Vue的快速上手
Vue指令上
Vue指令下
文章目录
- Vue指令的综合案例
- 记事本
- 列表渲染
- 删除功能
- 添加功能
- 底部统计和清空
- 总代码
- 结语
博客主页: He guolin-CSDN博客
关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力，一起成长！
嗨！收到一张超美的图， 愿你每天都能顺心！
记事本
功能需求：
1.列表渲染
2.删除功能
3.添加功能
4.底部统计和清空
列表渲染
首先先完成第一步，将列表渲染出来，为了让样式稍微好看一点，我加了部分css代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1{
color: red;
}
.text{
width: 250px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
ul{
padding: 0;
}
li{
list-style-type: none;
}
.del{
float: right;
}
</style>
</head>
<body>
<h1>记事本</h1>
<div class="text" id="app">
<input type="text" placeholder="请输入任务">
<button>添加任务</button>
<ul>
<li v-for="(item,index) in list " :key="list">
<span>{{index+1}}.</span><label for="">{{item.name}}</label>
<button class="del">X</button>
<hr>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
list:[
{ id: 1, name: '跑步一公里' },
{ id: 2, name: '跳绳200次' },
{ id: 3, name: '游泳100米' },
]
}
})
</script>
</body>
</html>
首先设置标题为记事本，其次设置一个输入添加事件的文本框和一个用于添加任务的按钮。接下来我们在data数据里设置一个数组，里面装存的有我们的任务事件,最右边有个删除按钮。再用v-for循环遍历，让我们的列表事件渲染到视图上。接下来来看下我们渲染后的结果。
删除功能
接下来我们要进行删除功能，当鼠标滑动到当前任务的时候才会显示我们的叉号，其余时间是隐藏的，我们可以css代码来控制这段内容
.del{
float: right;
display: none;
}
li:hover .del{
display: inline-block;
}
这样就能控制删除按钮的显示与不显示了。
我们在button按钮为X的地方设置删除
<button class="del" @click="del(item.id)">X</button>
<script>
const app = new Vue({
el: "#app",
data: {
list: [
{ id: 1, name: '步一公里' },
{ id: 2, name: '绳200次' },
{ id: 3, name: '泳100米' },
]
},
methods: {
del(id){
this.list = thislist.filter(item=> item.id !== id)
}
}
});
</script>
这样当我们点击按钮时，事件删除，我们来看下效果
添加功能
添加功能一共分两步，第一步实时获取我们的输入框里的内容，第二步点击我们的按钮的时，进行新增，往我们数组的最前面加。这里可以使用我们的v-model组件。
我们对输入文本框设置一个v-model属性，在对添加任务按钮加一个增加的方法的点击事件。
<input type="text" placeholder="请输入任务" v-model="todoName">
<button @click="add">添加任务</button>
<script>
const app = new Vue({
el: "#app",
data: {
todoName:"",
list: [
{ id: 1, name: 跑步一公里' },
{ id: 2, name: 跳绳200次' },
{ id: 3, name: 游泳100米' },
]
},
methods: {
del(id){
this.list =this.list.filte(item => itemid !== id)
},
add(){
//注意：我们增加了一个判断，如果添加的事件为空，会发出提示。
if(this.todoName.trim === ""){
alert("请输入任务")
return
}
//在列表的头部添加数据，id为时间戳。
this.list.unshift({
id:+newDate,
name:thistodoName
})
this.todoName=""
}
}
});
</script>
我们来看下效果：
底部统计和清空
我们在底部添加一个合计，来展示有多少个任务要做，和一个清空按钮。在按钮内写一个方法点击就将列表赋值为空列表
<span>合计：{{list.length}}</span>
<button class="clear" @click="clear">清空</button>
<script>
const app = new Vue({
el: "#app",
data: {
todoName:"",
list: [
{ id: 1, name: 跑步一公里' },
{ id: 2, name: 跳绳200次' },
{ id: 3, name: 游泳100米' },
]
},
methods: {
del(id){
this.list =this.list.filte(item => itemid !== id)
},
add(){
if(thistodoName.trim=== ""){
alert("请入任务")
return
}
this.listunshift({
id:+newDate,
name:thistodoName
})
this.todoName=""
},
clear(){
this.list = []
}
}
});
</script>
这样就可以看到我们的统计和清空拉
总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1{
color: red;
}
.text{
width: 250px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
ul{
padding: 0;
}
li{
list-style-type: none;
}
.del{
float: right;
display: none;
}
li:hover .del{
display: inline-block;
}
.clear{
float: right;
}
</style>
</head>
<body>
<h1>记事本</h1>
<div class="text" id="app">
<input type="text" placeholder="请输入任务" v-model="todoName">
<button @click="add">添加任务</button>
<ul>
<li v-for="(item, index) in list" :key="item.id">
<span>{{ index + 1 }}.</span>
<label for="">{{ item.name }}</label>
<button class="del" @click="del(item.id)">X</button>
<hr>
</li>
</ul>
<span>合计：{{list.length}}</span>
<button class="clear" @click="clear">清空</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
todoName:"",
list: [
{ id: 1, name: '跑步一公里' },
{ id: 2, name: '跳绳200次' },
{ id: 3, name: '游泳100米' },
]
},
methods: {
del(id){
this.list = this.list.filter(item => item.id !== id)
},
add(){
if(this.todoName.trim === ""){
alert("请输入任务")
return
}
this.list.unshift({
id:+new Date,
name:this.todoName
})
this.todoName=""
},
clear(){
this.list = []
}
}
});
</script>
</body>
</html>
结语
本次分享就到这里了，感谢小伙伴的浏览，如果有什么建议，欢迎在评论区留言，如果给小伙伴们带来了一些收获，请留下你的小赞，你的点赞和关注将会成为博主分享每日学习的动力。
