vue实现列表的新增和删除

最新推荐文章于 2023-11-21 16:47:47 发布

loveking6

最新推荐文章于 2023-11-21 16:47:47 发布

阅读量2k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/loveking6/article/details/103420686

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

注意this的指向问题，和v-model的双向数据绑定问题，以及some()和splice()方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='id'>
        <input type="text" v-model='name'>
        <input type="button" value="添加" @click='add'>
        <p v-for="item in list" :key="item.id">{{item.id}}---{{item.name}}
            <a href="" @click.prevent='del(item.id)'>删除</a>
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[{id:1,name:'张三'},
                      {id:2,name:'李四'},
                      {id:3,name:'王五'}]
            },
            methods:{
                add(){
                    this.list.push({id:this.id,name:this.name});               },
                del(id){
                    this.list.some((item,i)=>{
                        if(item.id==id){
                            this.list.splice(i,1);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

loveking6

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue实现列表的新增和删除

注意this的指向问题，和v-model的双向数据绑定问题，以及some()和splice()方法的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
复制链接

扫一扫