使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例
如下所示:
<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è)參考,也希望大家多多支持腳本之家。
- vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
- vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
- vue實(shí)現(xiàn)前臺(tái)列表數(shù)據(jù)過(guò)濾搜索、分頁(yè)效果
- vue 列表頁(yè)跳轉(zhuǎn)詳情頁(yè)獲取id以及詳情頁(yè)通過(guò)id獲取數(shù)據(jù)
- vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法
- 實(shí)例分析vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法
- vue主動(dòng)刷新頁(yè)面及列表數(shù)據(jù)刪除后的刷新實(shí)例
- 使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來(lái)
- Vue如何獲取數(shù)據(jù)列表展示
相關(guān)文章
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)題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-01-01
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)畫(huà)詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫(huà)演繹,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
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),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見(jiàn)問(wèn)題解決方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10

