如何在 vue 组件的 class 中添加条件?
How can I add condition in class on the vue component?
我的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
如果以上条件不正确?
如何正确写法?
如果 alert
应该始终存在,您可以这样写:
<div :class="['alert', item.created_at ? 'alert-success':'alert-warning']">...</div>
不要在绑定中串联,使用列表表示法!
我的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
如果以上条件不正确?
如何正确写法?
如果 alert
应该始终存在,您可以这样写:
<div :class="['alert', item.created_at ? 'alert-success':'alert-warning']">...</div>
不要在绑定中串联,使用列表表示法!