Vue知识点：动态绑定class

通过对象绑定：

• 绑定单个

  
   1. 方法一
   <template>
      <div class="hello">
          <div class="test-box" :class="{'active':isActive}" >{{ text }}</div>
      </div>
  </template>
  
  <script>
  export default {
      name: 'HelloWorld',
      data() {
          return {
              text: '动态绑定class-方法一',
              isActive: true
          }
      },
  }
  
   1. 方法二 (判断是否绑定一个active)
   	:class="{'active':isActive==-1}"  
  	或者
  	:class="{'active':isActive==index}"
  
  <template>
      <div class="hello">
          <ul>
              <li class="list" :class="{'on':isActive == item.index}" v-for="item in items" :key="item.index">
                  {{ item.index }} -{{ item.name }}
              </li>
          </ul>
      </div>
  </template>
  
  <script>
  export default {
      name: 'HelloWorld',
      data() {
          return {
              items:[
                  {
                      index: 0,
                      name: '张三',
                  },
                  {
                      index: 1,
                      name: '李四',
                  },
                  {
  
                      index: 2,
                      name: '王五',
                  }
              ],
              isActive: 0,
          }
      },
  }
  </script>
  
  <style scoped lang="scss">
      ul {
          li{
              list-style: none;
              &.list {
                  height: 40px;
                  line-height: 40px;
                  border-bottom: 1px solid #000;
                  padding: 0 10px;
                  font-size: 16px;
                  color: red;
                  &.on{
                      background-color: red;
                      color: #333;
                  }
              }
          }
      }
      
  </style>
  
  
  </script>
  
  <style scoped lang="scss">
      .test-box {
          width: 200px;
          height: 100px;
          margin: 40px auto;
          padding: 20px;
          background-color: #333;
          color: red;
          &.active {
              background-color: aquamarine;
              color: #333;
          }
      }
  </style>
  

方法一如图所示：

方法二如图所示：

• 绑定多个

  
   1. 方法一 （用逗号隔开）
      :class="{ 'active': isActive, 'sort': isSort }"
   
   2. 方法二 （放在data里面）
      //也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样
      :class="classObject"
  	data() {
  	  return {
  	    classObject:{ active: true, sort:false }
  	  }
  	}
  	
   3. 方法三 （使用computed属性）
      :class="classObject"
  	data() {
  	  return {
  	    isActive: true,
  	    isSort: false
  	  }
  	},
  	computed: {
  	  classObject: function () {
  	    return {
  	      active: this.isActive,
  	      sort:this.isSort
  	    }
  	  }
  	}
  

---

通过数组绑定：

• 单纯数组

  	:class="[isActive,isSort]"
  	data() {
  	  return{
  	    isActive:'active',
  	    isSort:'sort'
  	 }
  	}
  

• 数组与三元运算符结合判断选择需要的class（注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）

  :class="[isActive?'active':'']"
  或者
  :class="[isActive==1?'active':'']"
  或者
  :class="[isActive==index?'active':'']"
  或者
  :class="[isActive==index?'active':'otherActiveClass']"
  

• 数组对象结合动态判断

  //前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
  :class="[{ active: isActive }, 'sort']"
  或者
  :class="[{ active: isActive==1 }, 'sort']"
  或者
  :class="[{ active: isActive==index }, 'sort']"