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