vue-table實(shí)現(xiàn)添加和刪除
更新時(shí)間：2021年05月17日 11:55:31 作者：々橙若℃ №
這篇文章主要為大家詳細(xì)介紹了vue-table實(shí)現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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 class="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="#" @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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實(shí)時(shí)更新視圖數(shù)據(jù),這個(gè)時(shí)候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關(guān)于vue中this.$set()的基本用法實(shí)例,需要的朋友可以參考下2023-01-01
Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長(zhǎng)度
這篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長(zhǎng)度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫(kù))
這篇文章主要介紹了vue3.0?移動(dòng)端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實(shí)現(xiàn)本地預(yù)覽，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下2019-05-05
Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查
這篇文章主要介紹了Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進(jìn)行開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題,需要的朋友可以參考下2024-07-07
Vue按回車(chē)鍵進(jìn)行搜索的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue按回車(chē)鍵進(jìn)行搜索的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue的簡(jiǎn)介及@vue/cli?腳手架的使用示例
vue 是一個(gè) 漸進(jìn)式的javascript框架，腳手架是一個(gè)通用概念，幫助搭建項(xiàng)目的工具，本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧2022-12-12
Vue.js每天必學(xué)之方法與事件處理器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue自定義組件search-box，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05