Vue动态样式实现方式

Vue动态样式方法总结

前言

本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳。
如果亲爱的读者们需要,后续会更新Vue3的动态样式方法或者使用TypeScript来实现。
CSS动态样式 一般用于设置某个字段根据状态显示不同的样式。
比如 字段A,平时返回0,正常显示字段黑色;返回1时,显示异常,文字颜色为红色

Vue动态样式实现方式

: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状态</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变量名是以单个单词组成的。
    Vue动态样式方法总结
    比如这里success-text,变量无法表达出来,就算了驼峰命名也不行,因为successText是类名,不像:style行内式,是作为css属性名。

  • :style优先级高,无需考虑本标签元素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>

结尾

纸上得来终觉浅,
绝知此事要躬行。

发表回复