今天做了一个vue小练习TODOlist，用了一些不同的方法，功能基本实现，但是还有一些不太完美的地方
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> *{ margin: 0; padding: 0; } #demodiv{ margin: 100px; } li{ list-style: none; } .active{ color:slategray; background-color: #ccc; text-decoration: line-through; } </style> </head> <body> <div id="demodiv"> <h1>任务列表</h1> <p>任务总数：{{arr.length}}，还有：{{this.residue()}}未完成，[<a href="#" @click="del()">完成</a>]</p> <ul> <li v-for="(item,index) in arr" :class="item.style?‘active‘:‘‘"> <input type="checkbox" v-model="item.style"> <span v-if="item.edit" v-on:click="edit(index)">{{item.content}}---{{item.style}}</span> <input :autofocus="item.edit?‘‘:‘autofocus‘" v-else type="text" v-model="item.content" v-on:blur="edit(index)"> </li> </ul> <input type="text" v-model="inputVal"><button :disabled=state v-on:click="add()">添加</button> </div> <script> new Vue({ el:"#demodiv", data:{ state:true, inputVal:"", arr:[ {content:"亚瑟",style:false,edit:true}, {content:"阿古朵",style:false,edit:true}, {content:"兰陵王",style:false,edit:true}, {content:"猪八戒",style:false,edit:true}, {content:"阿珂",style:false,edit:true}, {content:"鲁班",style:false,edit:true}, {content:"凯皇",style:false,edit:true}, ] }, methods:{ add(){ if(this.inputVal != ""){ this.arr.push({content:this.inputVal,style:false,edit:true}) this.inputVal = ""; } }, //剩余的 residue(){ console.log(this.arr.filter(item=>item.style==false).length) return this.arr.filter(item=>item.style==false).length }, edit(index){ if(this.arr[index].style!=true){ this.arr[index].edit = !this.arr[index].edit; } }, del(){ this.arr = this.arr.filter(item=>item.style==false) } }, watch:{ inputVal(newval,oldval){ if(this.inputVal==""){ this.state = true; }else{ this.state = false; } } } }) </script> </body> </html>
其中仍有一点疑惑，就是每次如何点击后可以让input文本框出现后自动聚焦，使用了:autofocus="item.edit?‘‘:‘autofocus‘"还是不能解决
原文：https://www.cnblogs.com/kharvey/p/13527003.html