使用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ù)的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
- vue input輸入框關鍵字篩選檢索列表數(shù)據(jù)展示
- vue實現(xiàn)前臺列表數(shù)據(jù)過濾搜索、分頁效果
- vue 列表頁跳轉詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)
- vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
- 實例分析vue循環(huán)列表動態(tài)數(shù)據(jù)的處理方法
- vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
- 使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來
- Vue如何獲取數(shù)據(jù)列表展示
相關文章
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08Vue+Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細介紹了Vue如何利用Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-01-01Element plus實現(xiàn)圖片手動上傳與回顯的過程
近期,發(fā)現(xiàn)點擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-09-09VantUI封裝自定義Tabbar路由跳轉的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-05-05