Vue動態(tài)樣式方法實例總結

更新時間：2023年02月07日 09:52:01 作者：SuperYiY

在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關于Vue動態(tài)樣式方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

本文主要針對 Vue2.x 來展開vue的動態(tài)css樣式方法歸納。
如果親愛的讀者們需要，后續(xù)會更新Vue3的動態(tài)樣式方法或者使用TypeScript來實現。
CSS動態(tài)樣式 一般用于設置某個字段根據狀態(tài)顯示不同的樣式。
比如字段A，平時返回0，正常顯示字段黑色；返回1時，顯示異常，文字顏色為紅色

Vue動態(tài)樣式實現方式

:style 動態(tài)設置style行內樣式，優(yōu)先級最高
:class 動態(tài)設置class類名
method:{} 調用方法return返回
v-if/v-else + 復合類名

:style

// 1、三元表達式  對象形式
<div class="name" :style="{color:state == true ? 'red' : 'black'}">麻辣香鍋</div>
<div class="name" :style="state == true ? 'color:red' : 'color:black'">麻辣牛鍋</div>
// 2、直接對象形式  
<div class="name" :style="{fontSize:`${size}px`}">麻辣火鍋</div>
// 3、數組形式
<div class="name" :style="[styleObj1,styleObj2]">麻辣香鍋</div>
// 4、復合型
<div class="name" :style="[{color:state ? 'red' : 'black'},styleObj2]">麻辣香鍋</div>
// 4、調用方法形式
<div class="name" :style="setStyle()">麻辣雞煲</div>
export default {
	data(){
    	return{
            state:1,
            size:14,
            Obj1:{
                color:red
            },
            Obj2:{
                fontSize:12px
            }
        }
	},
    method:{
        setStyle(){
            let obj = {
                color:'red',
                fontSize:'14px'
            }
            return obj
        }
    }
}
<style>
  .name{
    color:yellow;
    font-size:12px;
  }
</style>

注意：

HTML上調用的所有東西，最好是該vue實例的data、method、watch、computed等本身的變量和函數，一般不要直接調用外部的函數，比如是工具類untils的方法，有需要可以在data中新建變量綁定在HTML上，在data方法或其他方式去調用。
js的樣式屬性名注意用駝峰命名法，比如font-size —— fontSize

:class

// 1、三元表達式，對象/數組形式，單個條件
<div class="name" :class="{'success-text':state == true}">廣式煲仔飯</div>
<div :class="['name', state == true ? 'success' : '']">廣式煲仔飯</div>
// 相當于
<div class="name" :class="state == true ? 'success-text : ''">廣式煲仔飯</div>

// 2、對象形式，多個條件
<div class="name" :class="{'success-text':state == true,'success-text2':state2 == true}">廣式煲仔飯</div>

// 3、data形式或者computed形式   （缺點就是類名一定只能是一個單詞）
<div class="name" :class="classObject">廣式煲仔飯</div>
<div class="name" :class="classObject_cp">廣式煲仔飯</div>

// 4、mothod方法
<div class="name" :class="setClass()">廣式煲仔飯</div>
<button @click="state = state ? false : true">改變state狀態(tài)</button>

export default {
  data () {
    return {
      state:true,
      state2:true,
      styleObj1:{
        color:'red'
      },
      styleObj2:{
        fontSize:'14px'
      },
      classObject:{
        success_text:true,  // 因為變量名不能用-來隔開,所以只能匹配到_或只有一個單詞的類名
        success_text2:true
      }
    }
  },
  computed:{
    classObject_cp:function(){
      return{
        success:this.state,
        success2:this.state2
      }
    }
  },
  methods: {
    setClass(){
      return {
        success_text:this.state,
        success_text2:this.state2
      }
    },
    changeState(){
      this.state = this.state ? false : true
    }
  }
}
<style>
  .name{
    color:yellow;
    font-size:12px;
  }
  .error-text{
    color:red;
  }
  .success-text{
    color:greenyellow;
  }
  .success-text2{
    font-size:16px;
    font-weight: 600;
  }
  .success{
    color:greenyellow;
  }
  .success2{
    font-size:16px;
    font-weight: 600;
  }
</style>

:class 目標就是通過判斷找到對應的css類名

方法3或4，注意類名只能是單個單詞或_連接等，此外的，都不行，因為js變量名是以單個單詞組成的。

比如這里success-text,變量無法表達出來，就算了駝峰命名也不行，因為successText是類名，不像:style行內式，是作為css屬性名。

:style優(yōu)先級高，無需考慮本標簽元素class的屬性，因為一定會被style相同的屬性所覆蓋；

v-if/v-else + 復合類名

        <div class="father">
          <div class="child success-text">child</div>
          <div class="child">
            <div v-if="state == true" class="success-text">child</div>
            <div v-else-if="state == false" class="error-text">child</div>
            <div v-else>--</div>  
          </div>
          <div class="child">child</div>
        </div>

    <style>
        .father{
            color:black
        }
        .child{
            fotn-size:16px
        }
        .success-text:{
            color:green
        }
        .error-text{
            color:red
        }
    </style>