我的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
如果上述条件不正确?
如何正确写作?
答案 0 :(得分:2)
如果alert
始终存在,您可以写:
<div :class="['alert', item.created_at ? 'alert-success':'alert-warning']">...</div>
不要在绑定中连接,请使用列表表示法!