溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下所示：
<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根據狀態添加列表數據和刪除列表數據的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
