vue 綁定樣式的幾種方式

vue 綁定樣式

對象語法

1.v-bind:class設置一個對象，動態切換class

<div :class="{'active':isActive}">xxx</div>
樣式是否起作用，根據isActive的布爾值是否為true

2.:class可以和class共存

<div class="static" :class="{'active':isActive,'error':isError}">xxx</div>
當isActive值為true，isError為false，樣式為 static和isActive。
當isActive值為false，isError為true，樣式為 static和isError。
當isActive值為true，isError為true ，樣式為 static和isActive、isError

3. :class可以綁定數據中的對象

<div class="static" :class="classobj">xxx</div>
export default {
  data(){
    return{
      classobj:{               //可以直接綁定一個對象，對象里面有多個樣式
        active:true,
        error:false
      }
    }
  }
}

 

 

數組語法

4.v-bind:class設置一個數組 

使用了數組就要在data中指定重命名

<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
  data(){
    return{
      activeCls:'active',      //相當於樣式active樣式在div中重命名 為activeCls
      errorCls:'error'
    }
  }
}
<style>
    .active{xxx}
    .error{xxx}
</style>

5.三元表達式

<template>
  <div id="app">
    <div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive:true,
      activeCls:'active',           //當isActive值為true時，會執行activeCls對應的樣式 active 並且執行baseClass對應的樣式 baseclass
      errorCls:'error',             //當isActive值為false時，會執行errorCls對應的樣式 error 並且執行baseClass對應的樣式 baseclass
      baseClass:'baseclass'
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.error{
  color: white;
}
.baseclass{
  text-align: center;
}
</style>

三元表達式

<div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">

 

 

6.數組語法中使用對象語法

<template>
  <div id="app">
    <div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive:true,                   //因為isActive值為true,樣式為active 和 baseClass對應的 baseclass 所以樣式為 active、baseclass
      activeCls:'active',
      baseClass:'baseclass'
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.baseclass{
  text-align: center;
}
</style>

 7.定義一個數組通過不同索引值獲取不同樣式

<div class="icon" :class="classMap[support.type]"></div>
    created () {
      this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
    },
    根據support.type的數組變化，索引到classMap對應的樣式

 

 

綁定內聯樣式

 

<div id="app">
    <div :style="{color:cl,background:bk}">你好嗎？</div></div>
<script>
    new Vue({
        el:'#app',
        data:{
            cl:'red',
            bk:'yellow'
        }
    })
</script>

直接綁定到一個樣式對象，讓模板更清晰：

<div id="app">
        <div :style="testObj">你好嗎？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })
</script>