如何控制多个同级视图的显示隐藏（Vue.js）

因

群里有个小伙伴问到了一个场景，有很多视图需要控制显示隐藏（视图可以同时显示），常规的做法就是每个视图都使用一个变量去控制，但是这样的话又会对应到每个控制变量切换的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
每天积累一点，希望能有蜕变的那一天