<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://www.jb51.net/vue2.0.js"></script> <style> .in{ margin:20px; } .cl1{ text-decoration: line-through; color: red; } .cl2{ } </style> </head> <body> <div> <input type="text" placeholder="请添加事件" v-model="msg"/> <input type="button" value="添加" @click="add()"/> <div v-for="(item,index) in alll" :key="index" :id="index" v-if="flag1||!item.check1"> <input type="checkbox" @click="clickChecked" :checked="item.check1"/> <span>{{item.msg1}}</span> <input type="button" value="删除" @click="delate"/> </div> <div> <input type="button" value="已完成显示开关" @click="showAll"/> <input type="button" value="清除已完成" @click="removeAll($event)"/> </div> </div> <script> new Vue({ el:'#app', data:{ msg:'', alll:[], flag1:true, }, methods:{ add(){ this.alll.unshift({msg1:this.msg,check1:false}); console.log(this.alll) }, delate(e){ let index1 = e.target.parentNode.id; this.alll.splice(index1,1); console.log(this.alll); }, clickChecked(e){ let index1 = e.target.parentNode.id; this.alll[index1].check1 = !this.alll[index1].check1; }, showAll(){ this.flag1 = !this.flag1; }, removeAll(){ console.log(this.alll); for(var i =this.alll.length-1;i>-1;i--){ if(this.alll[i].check1==true){ this.alll.splice(i,1); } } // for(let i = 0;i<this.alll.length;i++){ // if(this.alll[i].check1==true){ // this.alll.splice(i,1); // } // }//由于vue的数据双向绑定，从前到后遍历删除存在错误。 } } }) </script> </body> </html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: