vue动态绑定:class用法

动态绑定class

定义:

通过一个布尔值变量，确定是否添加class
动态绑定class，可以绑定数组，可以绑定对象

第一种:

class="{'active':isActive}"

<template>
  <div class="page">
   <div @click="get" class="max">
     <div class="box"  :class="{'hide':show}">
      111
    </div>
   </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    get () {
      if(!this.show){
        this.show = true
      }else{
        this.show = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.max{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.box {
  width: 25px;
  height: 25px;
  background: skyblue;
  display: inline-block;
}
.hide {
  opacity: 0;
}
</style>

第二种:

:class="{'active':isActive==index}"

<template>
  <div class="page">
    <div  class="max">
      <div class="box" v-for="(item,index) in 3" @click="get(index)" :class="{'hide':show == index}">
        111
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: 0
    }
  },
  methods: {
    get (index) {
     this.show = index
    }
  }
}
</script>
<style lang="scss" scoped>
.max {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.box {
  width: 25px;
  height: 25px;
  background: skyblue;
  display: inline-block;
}
.hide {
  border-bottom: 1px solid rgb(26, 25, 25);
}
</style>

第三种:

:class="[isActive?'active':'']"

<template>
  <div class="page">
    <div class="max" @click="get">
      点击我显示隐藏
      <div class="box" :class="[isActive? 'hide': '' ]">
        111
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    get () {
      if(!this.isActive){
        this.isActive = true
      }else{
        this.isActive = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.max {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.box {
  width: 25px;
  height: 25px;
  background: skyblue;
  display: inline-block;
}
.hide {
  border: 3px solid rgb(48, 16, 165);
}
</style>