如何在 vue.js 2 上的 class 中添加条件？

Question

我的组件vue是这样的:

<template>
    <a href="javascript:" class="btn btn-block" :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }" @click="add($event)">
        ...
</template>

存在错误：

invalid expression: :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }"

我该如何解决？

Answer 1

只需去掉:class中的括号:

<template>
    <a href="javascript:" class="btn btn-block" :class="product == 'responseFound' ? ' btn-default' : ' btn-success'" @click="add($event)">
        ...
</template>

如果要添加更多条件，用[]包起来创建数组：

:class="[product == 'responseFound' ? ' btn-default' : ' btn-success', foo ? 'foo' : 'bar']"

Answer 2

对于这种行为，我会使用计算的属性。

从您的模板中删除逻辑，并将其移动到您的脚本部分。

<template>
    <a href="javascript:" class="btn btn-block" :class="classes" @click="add($event)">
</template>

    <script>
      export default {
         computed: {
                classes() {
                    return this.product == 'responseFound' ? 'btn-default' : 'btn-success'             
                }
            }
         }
    </script>

如何在 vue.js 2 上的 class 中添加条件？

How can I add condition in class on vue.js 2?

vue.js

vue-component

vuejs2