vue.js使用更简单的方法制作带删除功能的tooolist
今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮。一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试了试,果然出来了。
li里边加了个删除按钮,对应着加上了个删除的方法,li循环里边要顺便取下此项的index值,然后在删除方法中作为参数传到下边逻辑代码中,在你点击哪个项的删除按钮的时候方法会把此项的index值传过去,在方法中再使用splice()方法删除数据中的此项就可以了,data发生改变视图层会自动跟随变化,好了,话不多说,上码!
<!DOCTYPE html> <html> <head> <title>todo-list</title> </head> <script type="text/javascript" src="./vue.js"></script> <body> <div id="app"> <input type="text" v-model="inputValue"> <button @click="handleBtnClick">提交</button> <ul> <li v-for="(item, index) in list">{{item}} <button @click="handleBtnDel(index)"> X </button></li> </ul> </div> </body> <script> let app = new Vue({ el: "#app", data: { list: [], inputValue:'' }, methods: { handleBtnClick: function() { this.list.push(this.inputValue) this.inputValue = '' }, handleBtnDel: function(index) { this.list.splice(index,1) } } }) </script> </html>