<template> <div> <div> <label for="inputNum">请输入：</label> <!--@keydow.13表示回车的事件--> <!--v-model是为了让输入的数据和inputItem.content同步--> <input type="text" placeholder="edit.." @keydown.13="addItem" v-model="inputItem.content" > <!--列表内容--> <ul> <li v-for="(key, item) in inputList"> <input type="checkbox" :checked="item.finished"> <span>{{key.content}}</span> <button>删除</button> </li> </ul> <p v-if="!inputList.length">暂无内容</p> </div> </div> </template> <script> export default { data () {...省略 }, methods: { addItem: function() { this.inputList.push(this.inputItem); /* 为什么我们要对inputItem再次初始化？ 解答：因为每次在输入框中输入数据，都会同时改变inputItem的content属性， 然后我们点击回车，该inputItem的整个对象都添加进inputList中， 按正常逻辑来说，inputList内的内容和inputItem是没有联系了。 如果我们此时不对inputItem进行再次初始化，那么就会发现你再次在输入框中输入数据的时候， 会同时改变下面的list的值，简易你们把初始化的代码去掉，运行下试试看！ */ this.inputItem = { content: '', finished: false, deleted: false }; }, //改变选中状态 changeState: function(index) {}, //删除列表元素 deleteItem: function(index) {} } } </script>
我们先看看列表内容的代码
<!--列表内容--> <ul> <li v-for="(item, index) in inputList"> <!--单选框绑定了item.finished，还添加了点击事件--> <input type="checkbox" :checked="item.finished" @click="changeState(index)" > <!--通过item.finished值来动态绑定class--> <span :class="{'finish':item.finished}">{{item.content}}</span> <!--按钮的颜色通过动态添加class来实现，然后按钮的文本通过改变isDel来实现，isDel的改变也是通过changeState方法来操作的--> <button @click="deleteItem(index)" :class="{'native':item.finished === true}" >{{isDel}}</button> </li> </ul> <p v-if="!inputList.length">暂无内容</p>
然后我们讲解changeState方法
//改变选中状态 changeState: function (index) { // this.inputList[index].finished = true 错误：这样如果点击第二次，无法回到false，就会一直true状态 this.inputList[index].finished = !this.inputList[index].finished; // 根据finished的值来对应的修改isDel的值，isDel的值就是按钮的文本 if (this.inputList[index].finished) { this.isDel = '删除' }else { this.isDel = '操作' } }, //删除列表元素 deleteItem: function (index) { if (this.inputList[index].finished) { his.inputList.splice(index,1); } }
总结
以上所述是小编给大家介绍的vue组件编写之todolist组件实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: