• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-table实现添加和删除

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

二.运行效果

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript JSON.stringify()的使用总结发布时间:2022-02-05
下一篇:
jquery 步骤进度轴插件的实现代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap