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>

 

posted @ 2020-02-27 21:59  Monter  阅读(225)  评论(0)  编辑  收藏  举报