昨天下午在记事本的性能上做了优化，做成了简略的 todolist，次要是来坚固一下 vue 的各种指令
以下是效果图
以上是简略版本的效果图，好啦，献上我的代码~ 欢送大家踊跃提出倡议
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>todolist</title>
<link rel="stylesheet" href="style/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todolist">
<!-- 头部区域 -->
<header class="header">
<h1>todolist</h1>
<input
type="text"
autofocus
autocomplete="off"
placeholder="请输出工作"
class="new_todo"
v-model="message"
@keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main" v-show="isShow">
<div id="head">
<h5> 待办事项 </h5>
<span>{{arr.length}}</span>
</div>
<ul>
<li v-for="(item,index) in arr" :key="item.name" @mouseover="mouseOver(index,1)" @mouseleave="mouseLeave(index,1)">
<input type="checkbox" @click="complateList(index)" v-model="item.checked">{{item.name}}
<span v-show="isChecked == index + 1 ? isIconShow : false" @click="remove(index,1)"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>
</li>
</ul>
<div id="head">
<h5> 已实现 </h5>
<span>{{complate.length}}</span>
</div>
<ul>
<li v-for="(item,index) in complate" :key="index" @mouseover="mouseOver(index,2)" @mouseleave="mouseLeave(index,2)">
<input type="checkbox" checked disabled @click="complateList(index)">{{item.name}}
<span v-show="isComplateChecked == index + 1 ? isComplateIconShow : false" @click="remove(index,2)"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>
</li>
</ul>
</section>
<!-- 统计和清空区域 -->
<footer class="footer">
<a href="#" @click="clear" class="clear">clear</a>
</footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var todolist = new Vue({
el: '#todolist',
data: {
// 待办列表
arr: [],
// 已实现列表
complate:[],
// 数组下标
index: 0,
message:'',
// 列表显示暗藏
isShow:false,
// 待办是否显示 icon
isIconShow:false,
// 待办选中行的索引
isChecked:0,
// 已实现选中行的索引
isComplateChecked:0,
// 已实现是否显示 icon
isComplateIconShow:false,
},
methods:{add(){if (this.message !== '') {
// 获取用户输出信息 并 增加到数组中
this.arr.push({name:this.message,checked:false})
// 显示列表
this.isShow = true
// 清空输入框
this.message = ''
}else{alert('请输出内容')
}
},
// 革除所有
clear(){
this.arr.length = 0
this.complate.length = 0
// 暗藏列表
this.isShow = false
},
// 鼠标移入
mouseOver(index,flag){if (flag == 1) {
this.isChecked = index + 1
this.isIconShow = true
}else{
this.isComplateChecked = index + 1
this.isComplateIconShow = true
}
},
// 鼠标移出
mouseLeave(index,flag){if (flag == 1) {
this.isChecked = index + 1
this.isIconShow = false
}else{
this.isComplateChecked = index + 1
this.isComplateIconShow = false
}
},
// 删除数组数据
remove(index,flag){if (flag == 1) {this.arr.splice(index,1)
}else{this.complate.splice(index,1)
}
},
// 实现待办
complateList(index){
// 增加到已实现数组中
this.complate.push(this.arr[index])
// 删除以后数组内容
this.arr.splice(index,1)
// 革除已实现数组中的勾选框
}
}
})
</script>
</html>
一开始有个小 bug , 如果勾选了待办中的第三条数据，数据从待办删除了，然而最初一条的勾选框还在。因为这里复用了组件，保留了之前的状态。要解决这个问题，能够为列表项带上 id 作为惟一 key，那么每次渲染列表时都会齐全替换所有组件，使其领有正确状态。然而我这里没有 id，所以我临时用的 name 做为惟一的 key
大家理论开发中尽量用 id 做为 惟一的 key
解决形式：通过给两个 v-for 增加一个 :key=item.name ,
此处附上我的 git 地址，能够下载源码哦~
https://gitee.com/celinaTong/…