本文实例为大家分享了vue-table实现添加和删除的具体代码,供大家参考,具体内容如下
一.代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!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 > 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 > |
二.运行效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/212452/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)