vue动态绑定Class样式

1. 三目元算符方式：

<!--vue代码-->
    <ul>
      <li v-for="item in itemData" :key="item">
        <i :class="item.isA ? 'class_a' : 'class_b'"></i> 
      </li>
    </ul>

 <!-- CSS代码 -->
  .class_a,.class_b{
    /*这里可以写一些公共样式*/
  }

  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }

2. 基本绑定：

<!--vue代码-->
  <div :class="{class_a:isActive}"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的样式*/
  }

或者

<block v-for="(item, index) in tab" :key="index">
					<view class="list-cont" @click="tabs(index,item.nav)" :class="{active:index==num}">
						<view>
							<text class="con-text-a">{{ item.name }}</text>
						</view>
						<view>
							<text class="con-text-b" :class="{activeb:index==num}">{{ item.title }}</text>
						</view>
					</view>
				</block>

3.对象绑定

<!--vue代码-->
    <div ：class="classObject"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        classObject:{
          class_a:true,
          class_b:true
        }
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }

4.绑定返回对象的计算属性

<!--vue代码-->
    <div v-bind="classObject"></div>

<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject:function () {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  这里要结合自身项目情况修改填写
        }
      }
    }
  }

<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }

  .class_b{
    /*这里写需要设置的第二种样式*/
  }

本文地址：https://blog.csdn.net/simple5960/article/details/109255294