Vue动态样式方法实例总结
SuperYiY 人气:0前言
本文主要针对
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>
结尾
加载全部内容