这个问题很简单,但我试着用不同的句法找不到答案. 在VUE工作,需要应用多种风格(与尾风).有一个样式运行得很好,下面的代码进行了验证,但只有最后一个样式text-red-300 for show`以某种方式应用了.

:class="{ ['bg-green-500, text-xs, text-red-300']: show, 'ml-12': !show  }"

推荐答案

只需go 掉数组方括号和逗号:

:class="{
  'bg-green-500 text-xs text-red-300': show, 
  'ml-12': !show
}"

Vue.js相关问答推荐

可组合数据获取示例

在哪里可以找到在线沙箱 Vuetify 3 模板来创建最小的可重现示例?

Vue.js 3 没有组件的实例?

如何将 axios/axios 拦截器全局附加到 Nuxt?

Bootstrap-vue b-table,标题中带有过滤器

根据 URL 有条件地隐藏视图组件

当前端和后端位于虚拟 docker 网络中时,如何使用 axios 寻址后端主机

vuejs挂载生命周期未触发

取消选中单选按钮

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

Nuxt 应用程序在刷新动态路由时返回 404(Tomcat 服务器)

Vue 3 组合 API,如何在 setup() 函数中获取上下文父属性?

所有 vue props和数据都给出错误 Property属性在 type 上不存在,带有 typescript

vue组件中导入和使用three.js库

如何在 NuxtJS 中设置全局 $axios 标头

vuex - 即使不推荐,是否可以直接更改状态?

IOS在输入焦点上显示键盘

Vue 3 – 渲染无法动画的非元素根 node

居中 v-toolbar-title

Vue-meta:metaInfo 无权访问计算(computed)属性