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