有条件地在Vue中添加CSS类

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':''"

文件在这里