Vue樣式綁定

Vue綁定樣式的2種方式

class對象

<template>
  <div class="hello">
    <div
      @click="handleDivClick"
      :class="{active:isactive}"
    >
sdfsdfsdfsd
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isactive:false
    }
  },
  methods:{
    handleDivClick:function(){
      this.isactive = !this.isactive
    }
  }
}
</script>

<style scoped>
.active{
  color: #f20;
}
</style>

class數組

<template>
  <div class="hello">
    <div
      @click="handleDivClick"
      :class="[active]"
    >
sdfsdfsdfsd
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      active:''
    }
  },
  methods:{
    handleDivClick:function(){
      this.active = this.active == "" ? 'active':'';
    }
  }
}
</script>

<style scoped>
.active{
  color: #f20;
}
</style>

style樣式

<template>
  <div class="hello">
    <div
      @click="handleDivClick"
      :style="active"
    >
sdfsdfsdfsd
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      active:{
        color: "red"
      }
    }
  },
  methods:{
    handleDivClick:function(){
      this.active.color = this.active.color == "red" ? 'black':'red';
    }
  }
}
</script>

 

:style="[active,{fontSize:'20px'}]"