Vue动态样式实现方式

前言

本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳   
    
    
。

如果亲爱的读者们需要    
    
  ，后续会更新Vue3的动态样式方法或者使用TypeScript来实现


     


     


  。

CSS动态样式 一般用于设置某个字段根据状态显示不同的样式 




 




 
。

比如 字段A    


     


     
，平时返回0




 




 




，正常显示字段黑色；返回1时   

   

 ，显示异常     

     

     ，文字颜色为红色

Vue动态样式实现方式

:style 动态设置style行内样式




  




  




，优先级最高 :class 动态设置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状态</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优先级高     
     
     ，无需考虑本标签元素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>

结尾

纸上得来终觉浅

 



 



，

绝知此事要躬行  


  


  


。