亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2018年09月29日 09:21:16   作者:馬優(yōu)晨  
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示:

<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號(hào)",
   "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號(hào)",
   "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號(hào)",
   "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ù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式

    Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式

    這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁(yè)面的兩種方式,這是最近項(xiàng)目中遇到的一個(gè)需求,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • Vue解決element-ui消息提示$message重疊問(wèn)題

    Vue解決element-ui消息提示$message重疊問(wèn)題

    這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問(wèn)題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64

    Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64

    這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
    2024-01-01
  • Vue布置導(dǎo)航守衛(wèi)獲取用戶信息

    Vue布置導(dǎo)航守衛(wèi)獲取用戶信息

    這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過(guò)程

    Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過(guò)程

    近期,發(fā)現(xiàn)點(diǎn)擊修改,element ui 的圖片沒(méi)有回顯到框中,所以本文給大家介紹了Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過(guò)程,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
    2024-09-09
  • 動(dòng)畫詳解Vue3的Composition?Api

    動(dòng)畫詳解Vue3的Composition?Api

    為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫演繹,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析

    Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析

    這篇文章主要介紹了Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)

    VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)

    本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • 深度解讀vue-resize的具體用法

    深度解讀vue-resize的具體用法

    這篇文章主要介紹了vue-resize深度解讀,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)

    Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)

    這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見(jiàn)問(wèn)題解決方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-10-10

最新評(píng)論