如下所示：
<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根据状态添加列表数据和删除列表数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
