前端学习五（vue高级特性）

2021-11-06 13:34:58 阅读：125 来源： 互联网

标签：vue name tester 前端特性 project item lists id

一、事件的参数传递

<body>
    <table id="app" border="">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>tester</th>
            <th>project</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in lists">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.tester}}</td>
            <td>{{item.project}}</td>
            <td><button @click="del(item.id)">删除</button></td>
        </tr>
    </table>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                lists: [{
                    "id": 1,
                    "name": "登录接口1",
                    "tester": "测试人1",
                    "project": "自动化测试平台1"
                },
                {
                    "id": 2,
                    "name": "登录接口2",
                    "tester": "测试人2",
                    "project": "自动化测试平台2"
                },
                {
                    "id": 3,
                    "name": "登录接口3",
                    "tester": "测试人3",
                    "project": "自动化测试平台3"
                }]
            },
            methods: {
                del: function (id) {
                    console.log("点击了删除按钮", id);
                    // 方法一，filter
                    // this.lists = this.lists.filter(
                    //     function (item) {
                    //         return item.id != id
                    //     }
                    // )
                    // 方法二，找到索引，再删数据
                    const ind = this.lists.findIndex(function (item) {
                        return item.id === id
                    })
                    console.log("索引", ind);
                    // 第一个入参为索引，第二入参为从入参索引开始删除的个数
                    this.lists.splice(ind, 1)
                }
            }
        })
    </script>
</body>

标签：vue,name,tester,前端,特性,project,item,lists,id
来源： https://www.cnblogs.com/yinwenbin/p/15516619.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端学习五（vue高级特性）