未分类

Vue官网todoMVC示例代码_vue.js_脚本之家

26 3月 , 2020  

三种状态筛选

完整代码

//双向绑定isChecked //动态绑定class该表已完成todo样式{{list.value}} //绑定blur失去焦点事件

methods: { toEdit { //使添加的todothing可编辑 obj.isEditing = true }, unEdit { //使添加的todothing不可编辑 obj.isEditing = false },}directives: { //自定义focus指令,需要一个binding参数做判断 "todo-focus": function  { if  { el.focus() } }}
 //times为0显示item,大于0显示items,细节注定成败 {{times}}&nbsp item left{{times}}&nbsp items left

computed: { times() { //使用计算属性计算待办todos的次数 let todoArr = this.todoLists let times = 0 for (let i = 0; i < todoArr.length; i++) { if (todoArr[i].isChecked === false) { times++ } } return times }},

通过todo的idChecked来控制是否已完成,从而动态改变样式。

通过每个todo里的isEditing属性控制show和是否可编辑两个状态,双击div之后改变当前todo的isEditing为true,从而显示为input,input失去焦点之后再通过blur事件改为false。

单条删除todo

单条添加todo

待办todos数量显示

如果待办todos的times小于todoLists长度,就证明有已完成的todo,就可以显示“clear
completed”,如果相等就说明没有已完成的todo。

要实现的功能

使用了计算属性对todoLists计算,用for循环刷选出idChecked为true的累加,最后返回times。

www6766com ,双击编辑todo&&单条todo已完成

deleteTodo { //删除单条todo this.todoLists.splice//使用splice的api window.localStorage.setItem("content",JSON.stringify //以JSON格式存储数据//localStorage存储数据},

//绑定删除单条todo事件

 //如果待办事件次数小于总todoLists长度就显示“clear completed” clear completed //如果待办事件次数等于总todoLists长度就显示“clear completed” 

clearTodos() { //清空已完成的todoLists,使用filter的api进行筛选 this.todoLists = this.todoLists.filter(todo => todo.isChecked === false) window.localStorage.setItem("content",JSON.stringify //以json格式存储数据},

清除全部已完成todos

{{item}}

这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令。让我们一步步来探讨一下。官网demo

switchStatus { //通过if条件判断操作 this.dataStatusIndex = index if (this.dataStatus[index] === "Active") { this.defaultShow = false this.whichShow = false } else if (this.dataStatus[index] === "Completed") { this.defaultShow = false this.whichShow = true } else if (this.dataStatus[index] === "All") { this.defaultShow = true }},

单条添加todo 单条删除todo 双击编辑todo 单条todo已完成相应样式状态改变
全部todo是已完成相应样式状态改变 清除全部已完成todos 待办todos数量显示
所有todos,已完成todos,未完成todos筛选

//操作input元素使enter一下之后清空输入框内容

data() {//一些初始化数据 return { todolists: [], dataStatus: ["All", "Active", "Completed"], dataStatusIndex: 0, whichShow: true, defaultShow: true }},addTodo { //添加todo var val = e.value if  {return} //如果输入内容为空则立即返回 this.todoLists = this.todoLists.concat({//使用concat这个api添加todo value: val, //输入内容 isEditing: false, //是否在编辑状态 isActive: false, //删除X图标是否激活 isChecked: false //是否已完成 }) this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零 window.localStorage.setItem("content",JSON.stringify//使用localStorage以JSON格式存储数据},

把每条todo的对应状态都存在同一个对象当中,在操作改变todo状态的时候不会被统一处理,使得每条todo都有单独的状态。

 * { padding: 0; margin: 0; box-sizing: border-box; } input { outline: none; } ul, li, ol { list-style: none; } #app { width: 800px; height: 900px; margin: 0 auto; text-align: center; background-color: rgb; padding: 24px 0; } #app .header { font-size: 48px; } .content { width: 72%; margin: 0 auto; box-shadow: 0 3px 3px 2px rgba; position: relative; } .icon-down { position: absolute; font-size: 24px; top: 16px; left: 16px; cursor: pointer; } #app .content .todos_add { width: 100%; height: 56px; padding: 16px 56px; font-size: 24px; border: 1px solid transparent; } .content_todoLists { position: relative; z-index: 3; } .content_todoList { display: flex; flex-direction: row; border-top: 1px solid #ccc; font-size: 24px; padding: 8px; background-color: white; align-items: center; } .checkBox { width: 20px; height: 20px; margin-left: 10px; } .content_todoList_main { flex: 1; text-align: left; margin-left: 16px; font-size: 20px; padding: 6px 0; } .main_input { position: relative; z-index: 1; } .content_todoList_delete { position: absolute; right: 16px; color: rgb; font-weight: 500; display: none; cursor: pointer; } .show { display: block; } .deleted { text-decoration-line: line-through; color: #bbb; } .show:hover { color: rgb; font-weight: 700; } ::-moz-placeholder { color: rgb; } ::-webkit-input-placeholder { color: rgb; } :-ms-input-placeholder { color: rgb; } .data { display: flex; justify-content: space-between; padding: 8px; font-size: 14px; font-weight: 300; color: rgb; } a { text-decoration: none; color: rgb; } .data_times { width: 73px; } .data_clearTodos { width: 142px; } .data_status a { display: inline-block; border: 1px solid transparent; border-radius: 2px; padding: 1px 4px; margin: 0 2px; } .data_status a:hover { border-color: #bbb; } .data_clearTodos a:hover { text-decoration-line: underline; } .active { box-shadow: 0 0 1px black; }

  todos         {{list.value}}        {{times}}&nbspitem left   {{times}}&nbspitems left    {{item}}    clear completed        let vm = new Vue { return { todoLists: [], dataStatus: ["All", "Active", "Completed"], dataStatusIndex: 0, whichShow: true, defaultShow: true } }, computed: { times() { //&#20351;&#29992;&#35745;&#31639;&#23646;&#24615;&#35745;&#31639;&#24453;&#21150;todos&#30340;&#27425;&#25968; let todoArr = this.todoLists let times = 0 for (let i = 0; i &lt; todoArr.length; i++) { if (todoArr[i].isChecked === false) { times++ } } return times } }, methods: { toEdit { //&#20351;&#28155;&#21152;&#30340;todo&#21487;&#32534;&#36753; obj.isEditing = true }, unEdit { //&#20351;&#28155;&#21152;&#30340;todo&#19981;&#21487;&#32534;&#36753; obj.isEditing = false }, addTodo { //&#28155;&#21152;todo var val = e.value if  { return } //&#22914;&#26524;&#36755;&#20837;&#20869;&#23481;&#20026;&#31354;&#21017;&#31435;&#21363;&#36820;&#22238; this.todoLists = this.todoLists.concat({ //&#20351;&#29992;concat&#36825;&#20010;api&#28155;&#21152;todo value: val, //&#36755;&#20837;&#20869;&#23481; isEditing: false, //&#26159;&#21542;&#22312;&#32534;&#36753;&#29366;&#24577; isActive: false, //&#21024;&#38500;X&#22270;&#26631;&#26159;&#21542;&#28608;&#27963; isChecked: false //&#26159;&#21542;&#24050;&#23436;&#25104; }) this.$refs.currentInput.value = "" //&#25353;&#19979;enter&#28155;&#21152;todo&#20043;&#21518;&#25226;&#36755;&#20837;&#26694;value&#28165;&#38646; window.localStorage.setItem("content", JSON.stringify //&#20351;&#29992;localStorage&#20197;JSON&#26684;&#24335;&#23384;&#20648;&#25968;&#25454; }, deleteTodo { //&#21024;&#38500;todo this.todoLists.splice window.localStorage.setItem("content", JSON.stringify //&#20197;json&#26684;&#24335;&#23384;&#20648;&#25968;&#25454; }, switchStatus { //&#35797;&#19979;&#19979;&#26041;&#19977;&#20010;&#29366;&#24577;&#20999;&#25442;&#65292;&#30053;&#40635;&#28902; this.dataStatusIndex = index if (this.dataStatus[index] === "Active") { this.defaultShow = false this.whichShow = false } else if (this.dataStatus[index] === "Completed") { this.defaultShow = false this.whichShow = true } else if (this.dataStatus[index] === "All") { this.defaultShow = true } }, clearTodos() { //&#28165;&#31354;&#24050;&#23436;&#25104;&#30340;todoLists this.todoLists = this.todoLists.filter(todo =&gt; todo.isChecked === false) window.localStorage.setItem("content", JSON.stringify //&#20197;json&#26684;&#24335;&#23384;&#20648;&#25968;&#25454; }, selectAllTodos() { //&#35774;&#32622;&#25152;&#26377;todo&#20026;&#24050;&#23436;&#25104; this.todoLists.map(todo =&gt; todo.isChecked = todo.isChecked &amp;#63; false : true) } }, directives: { //&#33258;&#23450;&#20041;focus&#25351;&#20196; "todo-focus": function  { if  { el.focus { let myStorage = window.localStorage.getItem this.todoLists = JSON.parse || [] //&#22240;&#20026;todoLists&#21021;&#22987;&#20540;&#26159;null,&#20351;&#29992;&#25110;&#36816;&#31639;&#31526;&#65292;&#22914;&#26524;&#20026;null&#35774;&#20026;&#31354;&#25968;&#32452; } })
0" //通过todoLists控制是否显示向下箭头icon@click="selectAllTodos"> //全部已完成事件

selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作 this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)}

在每个li元素上绑定了鼠标移入和移除的事件来动态的改变每个todo的isActive,然后再使用isActive动态显示class。

所有todos,已完成todos,未完成todos筛选

全部todos已完成

我这里是同时if条件句判断操作,有点麻烦,目前还没有想出来其他方案。在li元素使用三元运算符和或运算符进行操作显示不同状态的todos。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图