如何将课程与有条件的课程结合起来？ Vue.js 2

Posted 2023-02-16

【中文标题】如何将课程与有条件的课程结合起来？ Vue.js 2

【英文标题】：How can I combine class with class that has condition? vue.js 2

【发布时间】：2017-10-01 05:41:16

【问题描述】：

我的 vue 组件是这样的：

<template>
    <a class="btn btn-block" :class="[response == 'responseFound' ? ' btn-yellow' : ' btn-default']">
    ...
    </a>
 </template>

有效

但是，我想把它合并成一个类

我尝试这样：

<template>
    <a :class="'btn' [response == 'responseFound' ? ' btn-yellow' : ' btn-default'] ' btn-block'">
    ...
    </a>
 </template>

但它不起作用

我该如何解决？

【问题讨论】：

为什么要合并它们？这是正确的做法。此外，它不需要是一个数组，因为您只有一个要设置的类。

用javascript写代码：:class="'btn ' + ((response == 'responseFound') ? 'btn-yellow' : 'btn-default') + ' btn-block'">

是的，你为什么要合并，vue 为你做到了。您遵循的第一个过程是正确的。

【参考方案1】：

:class 或 v-bind:class 中的所有内容都是一个表达式。所以：

<template>
    <a :class="'btn' + ( response == 'responseFound' ? ' btn-yellow' : ' btn-default') + ' btn-block'">
    ...
    </a>
 </template>

【参考方案2】：

您还可以在一个数组中组合不同的绑定样式：

<a :class="'btn btn-block', [response == 'responseFound' ? ' btn-yellow' : ' btn-default']">