vue-table實(shí)現(xiàn)添加和刪除
本文實(shí)例為大家分享了vue-table實(shí)現(xiàn)添加和刪除的具體代碼，供大家參考，具體內(nèi)容如下
一.代碼<!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>表格練習(xí)</h1><input type='text' v-model='text'/><button @click='add'>添加</button><table border='1'> <thead> <tr><th>序號(hào)</th><th>品牌</th><th>時(shí)間</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='http://www.aoyou183.cn/bcjs/10168.html#' @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('請(qǐng)問(wèn)您是否確定刪除當(dāng)前行')) { this.list.splice(index, 1);} },} });</script>二.運(yùn)行效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Django ORM實(shí)現(xiàn)按天獲取數(shù)據(jù)去重求和例子2. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐3. XML入門(mén)的常見(jiàn)問(wèn)題(一)4. jsp EL表達(dá)式詳解5. 解決ajax的delete、put方法接收不到參數(shù)的問(wèn)題方法6. IntelliJ IDEA 統(tǒng)一設(shè)置編碼為utf-8編碼的實(shí)現(xiàn)7. idea修改背景顏色樣式的方法8. chat.asp聊天程序的編寫(xiě)方法9. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法10. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？
網(wǎng)公網(wǎng)安備