Vue 类绑定，更好的语法? [英] Vue class binding, better syntax?

问题描述

我有这个带有一些动态类的组件，但它看起来有点乱，我似乎不知道是否有更好的编写方法.vue 中的类绑定让我很困惑.

I have this component with some dynamic classes but it looks a little messy and I can't seem to figure out if there's a better way to write it. The class binding in vue kind of confuses me.

顺便说一句，我正在使用 pug，但无论如何，重点应该放在 :class 上

I'm using pug btw, but the focus should be on the :class anyway

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

我应该使用计算属性吗?或者也许是数组语法(我无法完全理解)?还是……?

Should I be using a computed property? Or maybe the array syntax (which I can't quite wrap my head around)? Or...?

感谢大家的帮助.

推荐答案

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

Another solutions it's to create a computed property where you list your classes and the condition to activate it, if the condition you write for one determinate class it true vuejs add this class to your element:

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

}

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

then in your pug code:

section.section(:class="myClassName")

这篇关于Vue 类绑定，更好的语法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！