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)目是迭代開發(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)文章
vue實(shí)現(xiàn)頁(yè)面內(nèi)容禁止選中功能,僅輸入框和文本域可選
今天小編就為大家分享一篇vue實(shí)現(xiàn)頁(yè)面內(nèi)容禁止選中功能,僅輸入框和文本域可選，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
通過(guò)vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過(guò)vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解
今天小編就為大家分享一篇對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
解決vue單頁(yè)面應(yīng)用中動(dòng)態(tài)修改title問(wèn)題
這篇文章主要介紹了解決vue單頁(yè)面應(yīng)用中動(dòng)態(tài)修改title問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue如何實(shí)現(xiàn)接口統(tǒng)一管理
這篇文章主要介紹了vue如何實(shí)現(xiàn)接口統(tǒng)一管理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue保存自動(dòng)格式化換行，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過(guò)引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09