【vue】利用vue实现元素增删查

最新推荐文章于 2024-08-04 18:14:03 发布

evan_qb

最新推荐文章于 2024-08-04 18:14:03 发布

阅读量605

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Evan_QB/article/details/80243048

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

首先引入vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

body部分如下: 给每一个li绑定一个id，这样删除就删除指定的id即可

<body>
    <div id="app">
        <input type="text"
            v-model="nextFruit"
            v-on:keyup.enter="addNewFruit"
            placeholder="请输入需要添加的水果">
        <ul>
            <li is="item"
                v-for="(fruit,index) in fruitList"
                v-bind:key="fruit.id"
                v-bind:title="fruit.title"
                v-on:remove="fruitList.splice(index,1)"></li>
        </ul>
    </div>
</body>

vue代码:

由于每次都需要拼接li，并给其绑定事件，所以在这里我们定义一个模板，然后再li里面利用is引入该模板即可。

在这里我们还使用了$emit()对自定义的的方法进行绑定,remove方法使用的是数组中的splice(index,1)方法进行移除,第一个参数传入索引值，第二个参数表示改动的数量，填1即可。

<script>
    //定义组件模板
    Vue.component('item',{
        //拼接li元素
        template:'\<li>\
                        {{ title }}\
                        \<button v-on:click="$emit(\'remove\')">删除</button>\
                 \</li>\
                 ',
        props:['title']
    });

    new Vue({
        el:'#app',
        //默认值
        data:{
            nextFruit:'',
            fruitList:[
                {
                    id:1,
                    title:'苹果'
                },
                {
                    id:2,
                    title:'梨子'
                },
                {
                    id:3,
                    title:'香蕉'
                }
            ],
            //给出下一个id的起始值
            newId: 4
        },
        methods:{
            //添加水果的方法
            addNewFruit: function () {
                //添加新水果
                this.fruitList.push({
                    id:this.nextId++,
                    title:this.nextFruit
                });
                //默认值为空
                this.nextFruit = ''
            }
        }
    })
</script>

效果图: