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>