站长资源网络编程
使用vue根据状态添加列表数据和删除列表数据的实例
简介如下所示：
{{obj.name}} +-
如下所示：
<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根据状态添加列表数据和删除列表数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。