美文网首页
2019-10-09 todo例子，input添加一项，删除某一

2019-10-09 todo例子，input添加一项，删除某一

作者: 流泪手心_521 | 来源:发表于2019-10-09 21:39 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="val" @keyup.enter="add">
    <ul>
        <li v-for="(a,index) in arr">
            {{a}}
            <button @click="remove(index)">删除</button>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
           val:'',
           arr:[]
        },
        methods:{
            add(){
                this.arr.unshift(this.val);
                this.val='';
            },
            remove(i){//点击当前传过来的索引
                //index filter返回新数组的索引，如果传过来的索引==filter返回新数组的索引就删(但是相等是为true的，所以应该是false才删除
                //filter返回来的值赶紧赋值给原数组，（因为filter返回来的是新的数组）
                this.arr=this.arr.filter((item,index)=>index!==i)
            }
        }
    })
</script>

<style scoped>

</style>
</body>
</html>

相关文章