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

群里有个小伙伴问到了一个场景,有很多视图需要控制显示隐藏( 视图可以同时显示
),常规的做法就是每个视图都使用一个变量去控制,但是这样的话又会对应到每个控制变量切换的methods,这样做会让代码变得很臃肿且不移维护,那么用什么方式可以比较优雅地解决这个问题呢?

常规做法(视图较多时不建议)

// 这里使用v-show比v-if更合适
template:
    
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:
    
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:
    
script: const SHOW1 = 1 << 0 // 显示视图1 const SHOW2 = 1 << 1 // 显示视图2 const SHOW3 = 1 <> num & 1 } } // 控制显示隐藏 this.ctlNum = SHOW1 + SHOW2 // 显示第一项 & 第二项 // 再切换一次 this.ctlNum = SHOW2 + SHOW3 // 显示第二项 & 第三项

这样看起来代码又变多了,虽多此一举的做法但是会使得代码可读性更好一些。

当然如果这是同种类型的视图,实现起来就可以进一步优化,可以通过

v-for进行循环,然后遍历调用showCtl(item.num)

一个编程的小技巧,可能没有什么太大的意义,且在实际项目中很少有机会会用到,只是开拓一下思路,水平有限,希望能对大家有帮助。

Github: github.com/lyh2668

AuthBy: lyh2668

每天积累一点,希望能有蜕变的那一天

稀土掘金稿源:稀土掘金 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 如何控制多个同级视图的显示隐藏(Vue.js)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录