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!
对你何止一句钟意。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cenos6.4安装gvim

1. 下载gvim并解压 wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 tar -jxvf vim-7.4.tar.bz2 2. 进入解压后的vim74目录并运行配置命令 cd vim74 ./configure --enable-guiauto --enable-cscope --enable-multibyte --enable-xim --enable-fontset --with-featuresh…

vue积累——另一种走马灯

效果图: vue源码: <template><el-carousel :interval"1500" type"card" height"400px" ><el-carousel-item v-for"item in imgList" :key"item.id"><img :src"item.idView" class"im…

python下电影_Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法...

本文实例讲述了Python3.6实现根据电影名称(支持电视剧名称)&#xff0c;获取下载链接的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;做个笔记(python 3.6&#xff0c;django 2.0)def get_url(outer_order_id):refundId get_refundId(outer_order_id)host_url …

假设检验背后的逻辑

内容转自知乎相关问题答案&#xff0c;写的很清晰。 1. 概述逻辑&#xff1a; 全称命题只能被否证而不能被证明。这个道理很简单&#xff0c;个案当然不足以证明一个全称命题&#xff0c;但是却可以否定全称命题。 研究时&#xff0c;我们当然不希望否证自己的研究假设&#xf…

Arduino上U8g2库自制中文库

U8g2最新版的本身自带中文库&#xff0c;之所以需要自制&#xff0c;是为了减小内存&#xff1b; 文章最后会标一下u8g2自带的中文库不过有些板子不能用gb2312等大字体&#xff1b; 字体库需要的是需要的是下面的这种编码&#xff0c;而实现这种编码&#xff0c;就需要map文件…

数据库创建(利用写好的数据库表生成创建表的sql语句+利用生成的数据库创建表加同步数据sql)

一.利用写好的数据库表生成创建表的sql语句 1.简单创建一个数据库&#xff0c;并建一个表&#xff0c;并编辑数据。 a.建库 b.建表 c.编辑表&#xff0c;保存时输入表名 d.刷新一下&#xff0c;出来了 e.转存导出sql文件。 二.利用生成的数据库创建表加同步数据sql。…

汽车行业会用到python吗_无人驾驶是未来5年最具竞争行业,会python就能拿高薪!...

今天&#xff0c;无论是在硅谷还是在 BAT &#xff0c;无人驾驶技术的发展都已经势不可挡。在不久的将来&#xff0c;个人交通出行的主要方式将是成批的无人驾驶车&#xff0c;极大提升道路安全。而目前&#xff0c;无人驾驶领域的职位需求已经开始快速增长。根据腾讯研究院与 …

链表反转python

def reverse_node_list(head):if not head or not head.next:return headprev Nonewhile head:curr headhead head.nextcurr.next prevprev currreturn prev 设置三个指针&#xff0c; prev指向前一个节点&#xff0c; head 指向现在的节点&#xff0c; curr指向下一个要去…

字符串之字符判断以及字母的大小写转换

char c //给定字符c 1.isalpha© //判断是否是字母 2.isdigit© //判断是否是数字 3.islower© //判断是否是小写字母 4.isupper© //判断是否是大写字母 5.tolower© //转变成小写字母 6.touper© //转变成代写字母 至于说应用&#xff0c;看代码悟吧…

symfony api 错误响应_Postman for Mac(API管理开发软件)

Postman for Mac是一款可在Mac端运行的API管理开发软件&#xff0c;postman 下载 mac不仅可以调试简单的css、html、脚本等简单的网页基本信息&#xff0c;它还可以发送几乎所有类型的HTTP请求&#xff0c;用户可以利用Chrome插件的形式把各种模拟用户HTTP请求的数据发送到服务…

前端学习

学习整理了web缓存的一些策略&#xff0c;如有不正确的地方&#xff0c;欢迎指正。 浏览器端的缓存规则 对于浏览器端的缓存来讲&#xff0c;这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本&…

string的反转输出以及char型字符串的反转输出

string str; //string型变量str char str1[]; //char型变量str string的反转输出: reverse(str.begin(),str.end()) char型的反转输出: strrev(str1); 实际应用看参考代码: #include<iostream> #include<bits/stdc.h> using namespace std; int main() {string s…

数据流图怎么画_概率图模型怎么画?5个步骤完成专业模型图

概率图模型是什么呢&#xff1f;概率图模型是用图形模式来表示各个变量概率相关关系以及与模型有关的变量的联合概率分布的一类模型。概率图理论可分为概率图模型表示理论、概率图模型推理理论和概率图模型学习理论三部分。概率图模型一般包括贝叶斯网络、马尔可夫网络和隐马尔…

res.status === 200含义

200本身就是http请求成功的响应值

process启动jar包判断成功_恒一广告助力2020年壹基金温暖包安康发放启动仪式成功举办...

有爱的冬天不会冷11月28日上午&#xff0c;由共青团安康市委、安康市教育体育局、安康市民政局、安康市关心下一代组委会、安康广播电视台、安康义工联合会主办的“壹家人温暖安康共青团助力脱贫攻坚暖冬行动”暨2020年壹基金温暖包安康发放启动仪式在安康市金州体育场成功举办…

pat(基本编程题集)6-2 多项式求值 (15 分)

这道题感觉有点狗&#xff0c;不难&#xff0c;但是第一次做的时候&#xff0c;运行超时错误让我很不解&#xff0c;一共才10个数大的数组&#xff0c;最坏情况也不过是10*10的时间复杂度O&#xff08;1&#xff09;。 但是限制就是辣么严&#xff0c;这个单层循环的优化有些类…

python read()为什么返回少一个字符_python-熊猫read_excel(sheet name = None)返回字符串字典,而不是数据帧?...

pandas read_excel documentation说,指定sheet_name None应该返回“所有表作为DataFrames的字典”.但是,当我尝试像这样使用它时,我得到了一个字符串字典.target_file "C:\file_here.xlsx"data pd.read_excel(target_file)print(type(data))data pd.read_excel(t…

Zabbix Server设置主机监控

转载于:https://www.cnblogs.com/momenglin/p/8557447.html

C语言之double实数的自动四舍五入取整

之前学习C语言的时候一直没有注意到原来double类型的数据在C里通过取不同的小数位数&#xff0c;输出能够实现四舍六入。 指正: double型数据可以实现0到4的舍操作以及6到9的入操作&#xff0c; 在真值为5的时候&#xff0c;舍入并不确定。 这里通过一个案例&#xff0c;一看…

mysql修改字段默认值_MySQL增删改查操作

增删改查操作查询表中的所有的记录&#xff1a;select from 表名(xs)创建数据库&#xff1a;create database if not exists xsgl;8.2创建表&#xff1a;cerate table if not exists&#xff08;判断是否存在&#xff09; 表名&#xff08;xsb&#xff09;8.3删除&#xff1a;d…