Question

我的组件vue是这样的：

<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'}“

我该如何解决？

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中添加类中的条件？

2 个答案: