vue动态添加样式及动态添加多个class名

78 阅读 0 评论 52 点赞

我是靠谱客的博主威武黑夜，这篇文章主要介绍vue动态添加样式及动态添加多个class名，现在分享给大家，希望可以做个参考。

在做pc或者移动端的时候通常会遇到一些由后台返回的数据动态改变页面的样式（ps:ul>li动态设置宽度）

复制代码

1
2
3
4
5
6
7
8
<div class="personVlaue">
  <div :class="vipLevel!=0?'merbercolor':'ordercolor'">0</div>
  <div v-for="(item,i) in vipLevelSettingBeanList" :class="[i==0?'borderlefts':'borderrights',item.level<=vipLevel?'merbercolor':'ordercolor',item.level==vipLevel?'merberbg':'orderbg']" :style="'width:'+memberWidth+'%'" :key="i" class="mermberValue">
      <p :class="i==0?'borderleft':'borderright'"></p>
       <span v-if="i==0">{{item.level}}</span>
       <span v-else>V{{item.level}}</span>
  </div>
</div>