vue-table实现添加和删除-偶像资源网

本文实例为大家分享了vue-table实现添加和删除的具体代码，供大家参考，具体内容如下

一.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=\"utf-8\">
    <title>vue-table示例</title>
    <style>
        .table_box {
            height: auto;
            width: 90%;
            margin: 5% auto;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
            height: auto;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
<div id=\"app\">
    <div class=\"table_box\">
        <h1>表格练习</h1>
        <input type=\"text\" v-model=\"text\"/>
        <button @click=\"add\">添加</button>
        <table class=\"table\" border=\"1\">
            <thead>
            <tr>
                <th>序号</th>
                <th>品牌</th>
                <th>时间</th>
                <th>操作</th>
            </tr>

            </thead>
            <tbody>
            <tr v-for=\"(v,k) in list\" :key=\"k\">
                <th>{{v.id}}</th>
                <th>{{v.name}}</th>
                <th>{{v.time}}</th>
                <th>
                    <a href=\"#\" @click.prevent=\"del(k)\">删除</a>
                </th>
            </tr>
            </tbody>
        </table>
    </div>

</div>
</body>
</html>
<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>
<script>

    var vm = new Vue({
        el: \'#app\',
        data: {
            num: 1,
            list: [],
            text: \'\',

        },
        methods: {
            add: function () {
                this.list.unshift({
                    \"id\": this.num++,
                    \"name\": this.text,
                    \"time\": new Date().toLocaleString(),
                });
            },
            del: function (index) {
                if (confirm(\"请问您是否确定删除当前行\")) {
                    this.list.splice(index, 1);
                }

            },

        }
    });
</script>

二.运行效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

vue-table实现添加和删除

一.代码

二.运行效果

请登录后发表评论