vue.js实现备忘录演示

本文实例为大家分享了vue.js实现备忘录演示的具体代码，供大家参考，具体内容如下

代码：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scalable=no，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title文档/title脚本src=' http 3360 vue。js '/脚本样式/*当任务完成时，勾选多选框后的样式*/.完成{ text-decoration : line-through；color : # aabac }/style/head dydiv id=' app '！-输入框：v型用于将输入内容跟内容进行数据绑定，按键。输入用于监听键盘回车事件-输入类型='text' v-model='task.content '占位符='edit' @keydown.enter='addTask '！-任务列表显示区域- div id='list '！-用控制显示判断当前是否有任务，任务数组目录长度为0时显示暂无任务-p v-if='列表。长度===0 ' style=' position : relative；left :20 pxtop :20 px ' color : # AAA '暂无任务/p！-用迭代遍历输出任务数组中的任务- div id='unit' v-for='(列表中的项目，索引)!-多选框的点击事件监听状态（是否勾选)的改变-输入类型='复选框@单击='更改状态（索引)'!-动态添加样式class=' finish '-span : class=' { ' finish ' : item。已完成' { {索引1 } } .{{ item.content }}/span！-删除按钮：点击按钮执行删除塔克函数，需要注意要传入索引值删除指定任务-button style=' background :红色；颜色：白色；@ click=' delete task(index)' delete/button/div/div/body脚本让VM=new Vue({ El : ' # app })，data : { task : { content : ' '，finished:false，//deleted:false，}，list:[]，addTask(){ this。名单。推(这个。任务)；this.task={ content: ' '，finished:false，//deleted:false，}，changeState(index){ let now state=this。列表[索引].完成；这个。列表[索引]。完成=!这个。列表[索引]。完成；}，删除任务(索引){ this.list.splice(索引，1);} }, });/script/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。