阅读 1701

如何控制多个同级视图的显示隐藏(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
每天积累一点,希望能有蜕变的那一天