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>

More than a favor for you!
对你何止一句钟意。

vue编写to-do list源码相关推荐

基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付
演示视频: 基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付演示视频支付宝沙箱: package com.java.controller;import java.util.* ...
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: ...
java计算机毕业设计基于springboot+vue+elementUI的旅游网站(源码+数据库+Lw文档）
项目介绍旅游管理平台采用B/S模式,促进了旅游管理平台的安全.快捷.高效的发展.传统的管理模式还处于手工处理阶段,管理效率极低,随着用户的不断增多,传统基于手工管理模式已经无法满足当前用户需求,随着 ...
java计算机毕业设计vue校园菜鸟驿站管理系统源码+数据库+系统+lw文档
java计算机毕业设计vue校园菜鸟驿站管理系统源码+数据库+系统+lw文档 java计算机毕业设计vue校园菜鸟驿站管理系统源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...
基于springboot vue新生可视化报到管理系统源码
演示视频: 基于springboot vue新生可视化报到管理系统源码 package com.zxy.controller;import com.baomidou.mybatisplus.exten ...
vue+django 微博舆情系统源码、深度学习+舆情扩散消失分析、舆情紧急等级、属地分析、按话题、情感预测、话题评论获取、提取观点、正面负面舆情、按区域检测舆情
项目背景 315又马上要到了,现在有开始对食品安全话题的关注地提升了,因此,本文系统对微博的食品安全话题进行分析,有如下的功能 1.展示当前食品安全事件相关的热点信息以及提供根据食品关键词,食品安全类 ...
C++基础升华：编写的中国象棋源码
VC++编写的中国象棋源码,支持悔棋功能,而且我觉得这象棋的智商相当高,玩了下竟然每次都输,可能我象棋水平太菜.本游戏源代码开源,在VC6.0下可顺利编译,游戏可选择难易程序,运行界面也挺友好. 项目 ...
计算机毕业设计基于springboot+vue+elementUI的网吧管理系统(源码+系统+mysql数据库+Lw文档）
项目介绍随着我国的经济发展,人们的生活水平也有了一定程度的提高,对网络的要求也越来越高,很多家庭都有了自己的电脑,但是很多时候大家在家里玩电脑的时候找不到那种玩耍的气氛和氛围,这个时候大家就都选择了 ...
计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部署
计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部署计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部 ...
java计算机毕业设计Vue社区蔬果商城源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue社区蔬果商城源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue社区蔬果商城源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B ...

vue编写to-do list源码

vue编写to-do list源码相关推荐

最新文章

热门文章