如何将班级与有条件的班级结合在一起?vue.js 2

Question

我的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>

但是它不起作用

我该如何解决？

Answer 1

内部的所有内容：类或v-bind：类是一个表达式。所以：

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