刚开始使用Vue,所以我不能让这个简单的东西工作.我想做的就是根据条件切换一个类.

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

推荐答案

首先,正如您所发现的,您可能应该删除重复的类定义.可以在绑定类定义中混合使用静态类和动态类.(如果你把副本留在那里,它仍然有效)

然后,你可以 Select ...

Object syntax

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

Array syntax

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

Simple expression

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

100

Vue.js相关问答推荐

无法解析组件:google—pay—button

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

在Vue 2中,是否可能在不创建组件的情况下注入代码块?

Vue 3 在一个值更改问题后再次重新渲染每一行

vue 不重新渲染数据更改

vue3 ssr 不返回纯 html

将媒体源/流绑定到视频元素 - Vue 3 组合 API

使用 Vue.js 和 Jest 进行 URL 重定向测试

使用 jquery-chosen 插件更新 vuejs 模型值

指定一个 vue-cli vue.config.js 位置

用 axios 搜索:新字符时取消之前的请求

如何为 Vue 应用提供 robots.txt

Vue.js 中 Chrome 和 Datalist 的性能问题

从 Url 中删除查询字符串参数

如何告诉 Vue 应用使用 Firebase 模拟器?

Laravel 事件未广播

Vue cli 在 css 中构建生产更改不透明度

在vue中单击时如何模糊元素

用于 nuxt.js 构建的自定义 index.html

vue-cli@3 没有可用于依赖类型的模块工厂:CssDependency