如何控制多個同級檢視的顯示隱藏（Vue.js）

一橫發表於2017-11-15
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
每天積累一點，希望能有蛻變的那一天

相關文章