- 在Vue项目中页面的element穿梭框组件中,要对每一条数据是否标记做出样式的区分,写小程序时一直用的三元表达式觉得判断很简洁,便看文档找到了Vue动态设置样式的方法:
效果图:
<div class="allList">
<div v-for="(item,index) in allData" :class="[item.flag==0?'':'color9']" @click="choose(item,index)">{{item.showText}}</div>
</div>
// :class--是设置动态类名
注意:这里三元表达式使用[ ]来包裹,而不是{ }
.color9 {
color: #999;
/* color: #999!important; 若组件层级很高加上important(层级最高)就会生效 */
}