Как управлять отображением-скрытием нескольких одноуровневых представлений (Vue.js)

внешний интерфейс GitHub Vue.js

потому что

Друг в группе попросил сцену, там много просмотров, которые нужно контролировать, чтобы показать и скрыть (Представления могут отображаться одновременно), обычной практикой является использование переменной для управления каждым представлением, но в этом случае она будет соответствовать методам переключения каждой управляющей переменной, что сделает код очень раздутым и неизменно поддерживаемым, поэтому какой метод можно использовать для Как насчет более элегантного решения этой проблемы?

Общая практика (не рекомендуется, когда много просмотров)

// 这里使用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 является логическим типом. Если вы посмотрите на false == 0 и true == 1, вы можете фактически преобразовать элемент управления if в двоичный элемент управления. Давайте посмотрим на простой реализованный код.

продвинутая практика

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-для циклов, затем проходит вызов showCtl(item.num)

Небольшой навык программирования может и не иметь большого значения, и в реальных проектах он используется редко, только для развития идей, уровень ограничен, надеюсь, всем пригодится.

Github: github.com/lyh2668
AuthBy: lyh2668
Накапливайте понемногу каждый день, надеясь на день преображения

Категории