template教學 如何在vue.js 2中添加條件?



vue slot用法 (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是這樣的:

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