因
群里有个小伙伴问到了一个场景,有很多视图需要控制显示隐藏(视图可以同时显示),常规的做法就是每个视图都使用一个变量去控制,但是这样的话又会对应到每个控制变量切换的methods,这样做会让代码变得很臃肿且不移维护,那么用什么方式可以比较优雅地解决这个问题呢?
常规做法(视图较多时不建议)
// 这里使用v-show比v-if更合适
template:
<div v-if="show1" class="class-1"></div>
<div v-if="show2" class="class-2"></div>
<div v-if="show3" class="class-3"></div>
script:
data = {
return {
show1: false,
show2: false,
show3: false
}
},
methods: {
changeShow1 () {
},
changeShow2 () {
},
changeShow3 () {
}
}
// 控制显示隐藏
this.show1 = true
this.show2 = true
this.show3 = false
// 再切换一次
this.show1 = true
this.show2 = false
this.show3 = true复制代码
思考
那么是否能够用一个变量去控制这些视图的显示隐藏呢?有什么东西和if的特性很像呢?
if的判断条件是个Boolean类型,如果把 false == 0 & true == 1 来看的话,其实就可以把if的控制转化成2进制的一个控制,来看一下实现的简单代码
进阶做法
template:
<div v-if="showCtl(0)" class="class-1"></div>
<div v-if="showCtl(1)" class="class-2"></div>
<div v-if="showCtl(2)" class="class-3"></div>
script:
data = {
return {
ctlNum: 0 // 1: show class-1, 2: show class-2, 4: show class-3
}
},
methods: {
showCtl(num) {
return this.ctlNum >> num & 1
}
}
// 控制显示隐藏
this.ctlNum = 1 + 2 // 显示第一项 & 第二项
// 再切换一次
this.ctlNum = 2 + 4 // 显示第二项 & 第三项复制代码
这个代码应该很好理解,就是借助二进制的移位去控制显示隐藏,ctlNum的值可以是[0, 7],一共有8种组合,涵盖了所有显示隐藏的情形,但是这样的方式在代码的可读性来讲肯定是不好的,比如我们可以这么做(但其实我更喜欢在上面的方案中加上注释)
名为多此一举的改良
template:
<div v-if="showCtl(0)" class="class-1"></div>
<div v-if="showCtl(1)" class="class-2"></div>
<div v-if="showCtl(2)" class="class-3"></div>
script:
const SHOW1 = 1 << 0 // 显示视图1
const SHOW2 = 1 << 1 // 显示视图2
const SHOW3 = 1 << 2 // 显示视图3
data = {
return {
ctlNum: 0 // 1: show class-1, 2: show class-2, 4: show class-3
}
},
methods: {
showCtl(num) {
return this.ctlNum >> num & 1
}
}
// 控制显示隐藏
this.ctlNum = SHOW1 + SHOW2 // 显示第一项 & 第二项
// 再切换一次
this.ctlNum = SHOW2 + SHOW3 // 显示第二项 & 第三项复制代码
这样看起来代码又变多了,虽多此一举的做法但是会使得代码可读性更好一些。
当然如果这是同种类型的视图,实现起来就可以进一步优化,可以通过
v-for进行循环,然后遍历调用showCtl(item.num)
一个编程的小技巧,可能没有什么太大的意义,且在实际项目中很少有机会会用到,只是开拓一下思路,水平有限,希望能对大家有帮助。
Github: github.com/lyh2668
AuthBy: lyh2668
每天积累一点,希望能有蜕变的那一天
所有评论(0)