Due to the

Group have a friend ask to a scene, there are a lot of view needs to control show hidden (view can also display), it is regular each view using a variable to control, but so will the methods corresponding to each control variable switching, doing so will make the code very bloated and don’t move the maintenance, So what’s an elegant way to solve this problem?

General practice (Not recommended when there are too many views)

// Use v-show instead of v-if: <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() {}} // Control display hide this.show1 =true
this.show2 = true
this.show3 = false// Toggle this.show1 = againtrue
this.show2 = false
this.show3 = trueCopy the code

thinking

Is it possible to use a variable to control the show and hide of these views? What’s similar to if? If (false == 0 & true == 1); if (false == 0 & true == 1)

Advanced practice

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) {
        returnThis. CtlNum >> num & 1}} // control display hide this.ctlNum = 1 + 2 // display the first & second items. // switch thisCopy the code

This code should be easy to understand, is the shift to control display hide, with the help of a binary ctlNum value can be [0, 7], a total of eight kinds of combinations, covers all hide, but in this way the readability of the code must be bad, for example, we can do it (but I prefer in the above scheme and comments)

Called superfluous improvement

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 // display view 1 const SHOW2 = 1 << 1 // display view 2 const SHOW3 = 1 << 2 // display view 3 data = {return {
        ctlNum: 0 // 1: show class-1, 2: show class-2, 4: show class-3
    }
},
methods: {
    showCtl(num) {
        returnThis. CtlNum >> num & 1}} // control display hide this.ctlNum = SHOW1 + SHOW2 // display the first item & the second item Display item 2 & item 3Copy the code

This makes it look like more code, but it makes the code more readable.

Of course, if this is the same type of view, the implementation can be further optimized, we can loop through v-for, and then iterate over showCtl(item.num).

A small programming skills, may not have much significance, and in the actual project rarely have the opportunity to use, just open up the idea, the level is limited, I hope to help you.

Github: github.com/lyh2668 AuthBy: lyh2668 Accumulate a little bit every day, hoping to have a metamorphosis one day