关于作者
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。
热门推荐 | 内容链接 |
---|---|
1 | openlayers 从基础到精通,300+代码示例 |
2 | leaflet 热门分解学习教程,150+图文示例 |
3 | cesium 从0到1学习指南,200+代码示例 |
4 | mapboxGL 从入门到实战,150+图文示例 |
5 | canvas 示例应用100+,揭密底层细节 |
6 | javascript从基础到高级,示例展示200+ |
7 | vue2 实战指南,100+个细节深度剖析 |
工程需求
在项目中遇到一个问题,就是数组套数组,然后在内部数组中补充一个属性值onview,原始时候设定为true或者false,通过v-for的形式,展现数据。 这里面的核心要点是,能够通过点击切换来修改onview的值,从而显示不同的状态,请参考效果图。
效果展示图
示例源代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-06-12
*/
<template>
<div class="box">
<div class="one1" v-for="(item,pindex) in myArray" :key="pindex">
<div class="oneTop1">
<div class="cc1" >
<span>名称:{{item.name}}</span>
</div>
</div>
<div v-for="(subitem,cindex) in item.options" :key='cindex' class="two1" >
<div class="cc1" >
<div class="fl1" >名字:{{subitem.cname}}</div>
<el-button class="fr1" type="danger" size='small' @click="changeTrue(pindex,cindex)" v-if="subitem.onview ">关闭</el-button>
<el-button class="fr1" type="success" size='small' @click="changeFalse(pindex,cindex)" v-else>显示</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr : [{
name: "第一组数据",
options: [{
cname: '大剑师兰特'
},
{
cname: '还是大剑师兰'
}
]
},
{
name: "第二组数据",
options: [{
cname: 'gis-dajianshi'
},
{
cname: '还是大剑师兰'
}
]
},
],
myArray:[],
}
},
methods: {
changeArr(){
let temp=this.arr
for( let j=0;j<temp.length;j++){
temp[j].options=temp[j].options.map((item)=>{
return {
...item,
onview:false,
}
})
}
this.myArray=temp;
},
changeTrue(pindex,cindex){
this.$set(this.myArray[pindex].options[cindex],'onview',false)
},
changeFalse(pindex,cindex){
this.$set(this.myArray[pindex].options[cindex],'onview',true)
},
},
mounted() {
this.changeArr()
}
}
</script>
<style scoped>
.box{ margin:30px auto; width:600px;}
.one1{ background-color: aliceblue;margin-bottom: 30px;}
.oneTop1{ background-color: aquamarine;}
.two1{ background-color:#eee;}
.cc1{ line-height: 50px; height:50px; padding:5px 10px }
.fr1{float: right; cursor: pointer;}
.fl1{float: left; cursor: pointer;}
</style>
核心代码
changeTrue(pindex,cindex){
this.$set(this.myArray[pindex].options[cindex],‘onview’,false)
},
changeFalse(pindex,cindex){
this.$set(this.myArray[pindex].options[cindex],‘onview’,true)
},
专栏目标
在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。
提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等