目录前言Vue动态样式实现方式:style:classv-if/v-else + 复合类名结尾前言 本文主要针对 Vue2.x 来展开vue的动态CSS样式方法归纳。如果亲爱的读者们
本文主要针对
Vue2.x
来展开vue的动态CSS样式方法归纳。
如果亲爱的读者们需要,后续会更新vue3的动态样式方法或者使用typescript来实现。CSS动态样式
一般用于设置某个字段根据状态显示不同的样式。
比如 字段A,平时返回0,正常显示字段黑色;返回1时,显示异常,文字颜色为红色
:style
动态设置style行内样式,优先级最高:class
动态设置class类名method:{}
调用方法return返回// 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>
注意:
// 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相同的属性所覆盖;
<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>
到此这篇关于Vue动态样式方法的文章就介绍到这了,更多相关Vue动态样式方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue动态样式方法实例总结
本文链接: https://www.lsjlt.com/news/194435.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0