Question

我有一些动态类的组件，但它看起来有点乱，我似乎无法弄清楚是否有更好的方法来编写它。 vue中的类绑定让我很困惑。

我正在使用pug btw，但焦点应该是:class无论如何

section.section(:class="{'section--margin-top': cartStep === 1 && cart.length >= 3, 'section--full-screen section--centered' : cartStep !== 1 || cart.length < 3 }")

我应该使用计算属性吗？或者也许是数组语法（我无法完全理解）？还是...？

感谢大家的帮助。

Answer 1

我认为计算属性和使用模板文字语法的组合会清理它：

:class="`section--margin-top: ${marginTop}, section--full-screen section--centered: ${fullScreenCentered}`"

computed: {
    marginTop () {
        return this.cartStep === 1 && this.cart.length >= 3
    },
    fullScreenCentered () {
        return this.cartStep !== 1 || this.cart.length < 3
    }
}

我不熟悉帕格，所以希望这可以正确翻译。

Answer 2

创建计算属性的另一个解决方案是列出类和激活它的条件，如果为一个确定类编写的条件 true vuejs将此类添加到你的元素：

computed: {
  myClassName() {
    'section--margin-top': this.cartStep === 1 && this.cart.length >= 3,
    'section--full-screen section--centered': this.cartStep !== 1 || this.cart.length < 3
  } 

}

然后在你的哈巴狗代码中：

section.section(:class="myClassName")

Answer 3

因此，有4种方法可供考虑：

对象语法-{ 'a': true, 'b': false, 'c': true } => a c
数组语法-['a', false ? 'b' : '', 'c'] => a c
混合语法-['a', { 'b': false, 'c': true }] => a c
字符串语法-true ? 'a c' : 'b' => a c

最后一个可以很好地工作，因为示例中的两个条件是互斥锁：

:class="largeCart ? 'section--margin-top' : 'section--full-screen section--centered'"

计算出以下内容：

computed: {
    largeCart: (vm) => vm.cartStep === 1 && vm.cart.length >= 3,
}

最好选择一个描述场景而不是结果样式的名称。

Vue类绑定，更好的语法？

3 个答案: