使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例

更新時間：2018年09月29日 09:21:16 作者：馬優(yōu)晨

今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<template>
 <div>
  <div v-for="obj of a" @click="sel(obj)">
   {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span>
  </div>
  <hr>
  <div>
   <div v-for="(obj,index) in temp" @click="cel(obj,index)">{{obj}}</div>
  </div>
 </div>
</template>

<script>
export default {
 methods: {
  sel(obj){
   obj.select = !obj.select
   if(obj.select){
    this.temp.push(obj)
   }else{
    obj.select = !obj.select
   }   
  },
  cel(obj,index){
   obj.select = !obj.select;
   console.log(index)
   this.temp.splice(index,1);   
  }
 },
 data(){
  return {
   temp:[],
   a:[{
   "code": "1",
   "name": "1",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216號",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null,
   select:false
  },{
   select:false,
   "code": "2",
   "name": "2",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216號",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null
  },{
   select:false,
   "code": "3",
   "name": "3",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216號",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null
  }],
  }
 }
}
</script>

以上這篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項目環(huán)境搭建
這篇文章介紹了vue項目環(huán)境搭建的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
前端請求超時截斷axios?timeout設(shè)置未生效情況解決記錄
在項目中遇到了后臺接口返回數(shù)據(jù)慢的時候往往需要設(shè)置請求失效時間,在項目中遇到設(shè)置timeout失效問題由此記錄下來,這篇文章主要給大家介紹了前端請求超時截斷axios?timeout設(shè)置未生效情況解決的相關(guān)資料,需要的朋友可以參考下
2024-07-07
vue項目中路由懶加載的三種方式(簡潔易懂)
本文主要介紹了vue項目中路由懶加載的三種方式,主要包括vue異步組件,組件懶加載,webpack的require.ensure(),具有一定的參考價值,感興趣的可以了解一下
2024-01-01
vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue使用vue-cli創(chuàng)建項目
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
elementUi 中table表尾插入行的實例
這篇文章主要介紹了elementUi 中table表尾插入行的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
swiper/vue 獲取 swiper實例方法詳解
在網(wǎng)上搜了一下如何調(diào)用swiper實例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實例,這篇文章主要介紹了swiper/vue 獲取 swiper實例方法詳解,需要的朋友可以參考下
2023-12-12
vue3的自定義指令directives實現(xiàn)
本文主要介紹了vue3的自定義指令directives實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07