Question

刚开始使用Vue，所以我无法让这个简单的事情发挥作用。我试图做的就是根据条件切换一个类。

<button type="button" 
        class="btn dropdown-toggle" 
        v-bind:class="{ btn-default: (search.category != 'all') }">
    {{ filterCategoryText || 'Category' }}
</button>

Answer 1

首先，正如您所发现的那样，您应该删除重复的类定义。您可以在绑定类定义中混合静态和动态类。（如果你把副本留在那里它仍然可以工作）

然后，您可以选择......

对象语法

// property names will be in the class list if their values are truthy
:class="{ 
    'btn-default': search.category != "all", 
    'btn' : true, 
    'dropdown-toggle' : true 
}"

数组语法

// an item in the array becomes a class in the class list
:class="[
    search.category != 'all' ? 'btn-default':'',
    'btn',
    'dropdown-toggle'
]"

简单表达

// if you only have one item, just use a simple expression
:class="search.category != 'all' ? 'btn-default':''"

<强> Docs are here

Answer 2

想象一下：

<button type="button" 
        :class="[(search.category) ? '' : 'btn-default', 'btn dropdown-toggle']"
    {{ filterCategoryText || 'Category' }}
</button>

Answer 3

您仍然可以使用Object语法进行类绑定。我猜你的例子中的代码不起作用，因为你没有用引号包装对象属性名称。此外，您至少有三个选择。在这种情况下，如果可能的话，我总是坚持使用对象，因为它通常更具可读性。看看：

new Vue({
  el: '#app',
  data: {
    red: 'nope',
  },
  methods: {
    toggle() {
      this.red = this.red === 'yes' ? 'nope' : 'yes';
    }
  },
})

.is-bold {
  font-weight: 900;
}

.is-red {
  color: red;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p class="is-bold" :class="{'is-red': red === 'yes'}">
    Option
  </p>
  <p class="is-bold" :class="red === 'yes' ? 'is-red' : ''">
    Option 1
  </p>
  <p class="is-bold" :class="[red === 'yes' ? 'is-red' : '']">
    Option 2
  </p>
  <button @click="toggle">Toggle class</button>
</div>

jsfiddle：https://jsfiddle.net/oniondomes/06bg516h/

Answer 4

试试这个而不是v-bind：class =“{'btn-default'：search.category！='all'}”

有条件地在Vue中添加CSS类

4 个答案: