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

54 阅读 0 评论 36 点赞

我是靠谱客的博主威武黑夜，最近开发中收集的这篇文章主要介绍vue动态添加样式及动态添加多个class名，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<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>