vue-table添加和删除 vue-table实现添加和删除
々橙若℃ № 人气:0想了解vue-table实现添加和删除的相关内容吗,々橙若℃ №在本文为您仔细讲解vue-table添加和删除的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>
二.运行效果
加载全部内容