vue编写to-do list源码

前端重于积累，下次使用不迷路。
纯vue代码
话不多说,直接上效果图:

源码附上:

<template><div class="bgBody"><!--    卡片--><el-row :gutter="12" ><el-col :span="8" ><el-card shadow="hover" class="bgRow"><!--    电影清单    --><h2 style="margin-right: 200px;line-height: initial;"><strong style="font-weight: 10;color: #3f8b5c;">想看的电影：</strong><input style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"type="text" v-model="inputValue" @keydown.enter="submit"></h2><h2 style="font-weight: 10;color: #b68a26; line-height: initial; margin-right: 410px">想看:({{noLength}})</h2><h3 class="xiangKan"><ul><li v-for="(item,index) in todoList" :key="index" v-show="!item.done"><input type="checkbox" @click.prevent="change(item,true)"><span v-if="index!=updateIndex" @dblclick="update(item,index)" style="font-weight: 10;">{{item.title}}</span><input v-if="index==updateIndex"type="text"v-model="item.title"@keydown.enter="updateSave"@keydown.esc="backData(item)"@blur="updateSave"v-focusstyle="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"><span class="del-btn" @click="del(index)">×</span></li></ul></h3><h2 style="font-weight: 10;color: #959595;line-height: initial; margin-right: 380px" >已看完:({{yesLength}})</h2><h3 class="yiKan"><ul ><li v-for="(item,index) in todoList" :key="index" v-show="item.done"><input type="checkbox" checked @click.prevent="change(item,false)"><span v-if="index!=updateIndex" @dblclick="update(item,index)"style="font-weight: 10;">{{item.title}}</span><input v-if="index==updateIndex"type="text"v-model="item.title"@keydown.enter="updateSave"@keydown.esc="backData(item)"@blur="updateSave"v-focusstyle="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"><span class="del-btn" @click="del(index)">×</span></li></ul></h3></el-card></el-col></el-row></div>
</template><script>
export default {
name: "TODO",data() {return {inputValue: "", // 输入框的值todoList: [], // 数据updateIndex: -1, //要修改的元素下标tempValue: "" //临时保存信息的变量}},created() {// 初始化数据let todoList = localStorage.todoList;if (todoList) {this.todoList = JSON.parse(todoList)}},computed: {noLength() { // 计算未完成的元素长度let count = 0this.todoList.map(item => {if (!item.done) {count++}})return count},yesLength() { // 计算已完成的元素长度let count = 0this.todoList.map(item => {if (item.done) {count++}})return count}},methods: {submit() {// 提交this.todoList.push({title: this.inputValue,done: false})// 置空输入框this.inputValue = ""//同步this.save();},change(item, checked) {// 点击复选框，改变完成状态if (checked) {item.done = true} else {item.done = false}this.save();},update(item, index) {// 把元素的内容临时保存到一个变量中this.tempValue = item.title// 设置要修改元素的下标this.updateIndex = index},updateSave() {// 修改后保存this.save()// 还原数据this.updateIndex = -1this.tempValue = ""},backData(item) {// 按esc键还原，设置当前元素的内容为保存的临时变量值item.title = this.tempValue// 清除要修改的元素下标this.updateIndex = -1// 清除临时变量this.tempValue = ""},del(index) {// 根据下标删除元素this.todoList.splice(index, 1)this.save()},save() {//同步数据localStorage.todoList = JSON.stringify(this.todoList)}},directives: { // 自定义指令focus: {inserted(el) {el.focus()}}}}
</script><style scoped>
.del-btn{margin-left:20px;font-size:16px;color:red;cursor:pointer;
}
.xiagnKan ul{list-style: none;padding: 0;margin: 0;color: rgb(130,130,130);
}
.xiangKan ul li{line-height: 30px;color:darkgoldenrod;
}
.yiKan ul{list-style: none;padding: 0;margin: 0;color: rgb(130,130,130);
}
.yiKan ul li{line-height: 30px;color: rgb(130,130,130);
}
.bgRow{background: rgb(45,46,52);border: none;
}
.bgBody div{margin-left: calc(50% - 300px);
}
</style>