如何将 class 与具有条件的 class 组合？ vue.js 2

Question

我的 vue 组件是这样的：

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

有效

但是，我想把它合二为一class

我这样试：

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

但是不行

我该如何解决？

Answer 1

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

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

Answer 2

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

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

How can I combine class with class that has condition? vue.js 2