前端重于積累，下次使用不迷路。
純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>

More than a favor for you!
對你何止一句鐘意。

總結

以上是生活随笔為你收集整理的vue编写to-do list源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。