Vue动态样式方法总结

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>exportdefault{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>exportdefault{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 + 复合类名

<divclass="father"><divclass="child success-text">child</div><divclass="child"><divv-if="state == true"class="success-text">child</div><divv-else-if="state == false"class="error-text">child</div><divv-else>--</div></div><divclass="child">child</div></div><style>.father{color:black
        }.child{fotn-size:16px
        }.success-text:{color:green
        }.error-text{color:red
        }</style>

结尾

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