如何在vue组件的类中添加条件?

时间:2017-04-05 07:14:23

标签: vue.js vuejs2 vue-component vuex

我的vue组件,您可以在下面看到:

<template>
    <div>
        <div class="panel-group" v-for="item in list">
            ...
            <div :class="'alert ' + item.created_at ? 'alert-success' : 'alert-warning'">
            ...
        </div>
    </div>
</template>
<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

执行时,显示alert-success。而item.created_at = NULL

是否应显示alert-warning

如果上述条件不正确?

如何正确写作?

1 个答案:

答案 0 :(得分:2)

如果alert始终存在,您可以写:

<div :class="['alert', item.created_at ? 'alert-success':'alert-warning']">...</div>

不要在绑定中连接,请使用列表表示法!