当先锋百科网

首页 1 2 3 4 5 6 7
  • 在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(层级最高)就会生效 */
}