Vue實現(xiàn)push數(shù)組并刪除的例子
更新時間：2019年11月01日 11:02:49 作者：任我行R
今天小編就為大家分享一篇Vue實現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在用Vue做評論互動的時候用到了push，因為項目是迭代開發(fā)，所以現(xiàn)在做一個簡易的demo回顧下
<template>
<div>
<ul v-for="(item , index) in list" :key="index">
<li>
{{item.serial}}---
<button @click="remove(index)">刪除</button>
</li>
</ul>
<input type="text" v-model="serial" />
<input type="button" value="點擊添加" @click="getserial" />
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ serial: 1 },
{ serial: 2 },
{ serial: 3 },
{ serial: 4 },
{ serial: 5 }
],
serial: ""
};
},
methods: {
getserial() {
this.list.push({
serial: this.serial
});
this.serial = "";
},
//通過索引刪除數(shù)組
remove(index) {
//splice 操作數(shù)組的方法
this.list.splice(index, 1);
}
}
};
</script>
<style>
</style>
以上這篇Vue實現(xiàn)push數(shù)組并刪除的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
通過Element ui往頁面上加一個分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個分頁導(dǎo)航條的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06
本篇文章主要介紹了vue-router 組件復(fù)用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
前端H5微信支付寶支付實現(xiàn)方法(uniapp為例)
最近上線一個項目,手機網(wǎng)站進行調(diào)起支付寶App支付,做起來還是滿順手的,在此做個記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了VsCode里的Vue模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
組件是?vue.js?最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實現(xiàn)2022-09-09
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新
這篇文章主要介紹了vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新，這里整理了詳細的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue中數(shù)組和對象更改后視圖不刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09