使用vue根据状态添加列表数据和删除列表数据的实例
程序员文章站
2023-09-21 13:19:07
如下所示：
如下所示：
<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根据状态添加列表数据和删除列表数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 冬季四个要点保你不生病 泡脚护颈滋补晒暖
下一篇： 平时吃鸡蛋上火吗