Vue 通过style属性、class属性来动态修改CSS样式

置顶 Genting丶incubus

已于 2024-06-25 17:02:31 修改

阅读量2.1w

点赞数 10

文章标签： javascript vue.js 前端 uniapp

于 2022-07-11 21:38:18 首次发布

本文链接：https://blog.csdn.net/weixin_43818307/article/details/125721619

版权

前情提要

需求：根据data某些属性，动态修改某个节点的样式或者class

1、首先很重要的一点是 v-bind: 引号内的是JS表达式而不是单纯一个值或者字符串，判断时候使用的是truthy真值,而不是布尔值，大白话就是会进行类型转换。就当成你在script标签中写的JS就行了（注意区分JS表达式和JS代码）

JS表达式：产生一个值，可以放在任何需要值的地方,用处非常大,如三目表达式、1+'2'、Math.max(a,b)、vue里的有返回值的methods,computed,props里的属性等等
JS代码（语句）: 如if(x>1){.......}

2、另一点是，你需要保证动态的变量被vue所管理，能监听到变化，深入响应式原理 — Vue.js

如果没有动态更新，请考虑数据是不是响应式，浏览器支持（IOS某些版本有问题），页面渲染问题（$nexttick）等因素。

这样节点才会重新渲染。

PS:动态修改class或Style不会和原生的属性冲突，效果是加法，你可以静态和动态都写。具体参考css优先级（如继承、写了!important、重名属性后者覆盖前者等特殊情况）

总结

老样子，上来先给出总结，来自于vue官网Class 与 Style 绑定 — Vue.js的变通

修改class属性总结

<!-- 三目表达式判断，提供的是类名-->
<div :class="isSquare?'square':'circular'"></div>

<div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div>

<!--布尔值-->
<!--给类名判断 true则加上这个类名-->
<div :class="{'square':isSquare,'square-color':isColor}"></div>

Tip:有时候，需要判断多个状态来决定不同类名时候，在微信小程序中是不支持直接通过函数提供类名的，需要用第二种方法给一个布尔值来提供类名。

修改style属性总结

<div class="square" :style="{'background-color':isChange?'blue':'red',
'color':isChange?'white':'black'}">测试</div>

<div class="square" :style="{'height':data_height+'px',
'width':data_width+'px'}">测试</div>

新增：需要修改伪类、伪元素选择器的,比如修改原生input::placeholder

<!-- 修改伪类、伪元素元素选择器 -->
<div class="square" :style="{'--selfColor':data_color+'px'}">测试</div>


<!-- style内 -->
<style>
input::placeholder {
  color: var(--selfColor); /* 自定义占位符文本颜色 */
}
</style>

自定义变量名

CSS 变量名不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合

此外uniapp中var()不支持rpx,无效,但你可以这样处理.

<div class="square" :style="{'--self-size':80}">测试</div>

<style>
.square{
    width:calc(var(--self-size) * 1rpx);
}
</style>

请注意，微信小程序必须使用短横线，不能使用驼峰命名,否则无效

顺带提一嘴,微信小程序中使用deep修改子组件的样式，比如你用了u-view 一个UI框架,你想修改里面的样式

那你需要先在methods平级的地方加上接触样式隔离

options: {styleIsolation: 'shared' },
data(){
    return{
    }
}

再者,需要提供包含子组件的父元素类名

语法:

.父元素类名 ::v-deep或/deep/ .组件名 .具体修改的类名(后面就是自由发挥的选择器)

<view class="imgBox"
:style="{
	'--margin-right':80,
}"
>
	<u-upload	
	@afterRead="afterRead"
	@delete="deletePic"
	uploadText="上传图片"
	width="57"
	height="57"
></u-upload>
</view>


<style scoped>
.imgBox ::v-deep .u-upload .u-upload__wrap__preview{
	margin-right:calc(var(--margin-right) * 1rpx);
	margin-bottom:10rpx;
}
</style>

总结只是让会的人勾起回忆的，如果刚接触，或者想看更多变式，请看下面详解。

特别注意：注意属性必带的双引号""已经被使用了，所以双引号内表示字符串只能使用单引号' '，否则会出现匹配冲突。若有特殊情况需要用第三个，可以转义使用 " 代替引号（依然需要配对）

修改class属性

1、利用JS表达式提供一个字符串

<!--HTML部分 -->
<div :class="isSquare?'square':'circular'"></div>

<!--isSquare真值为真,等同于-->
<div class="square"></div>

<!--isSquare真值为假,等同于-->
<div class="circular"></div>

这种方法用得比较多，你可以变化着JS表达式的内容，你会发生最后的行为和原生的操作没有太大的区别，易读性比较好。

如果需要多个，则变为数组（这种行为不太规范，也有点怪，推荐使用下面vue的官方方法）

<div :class="[isChange?'blue':'red',isSquare?'square':'circular']"></div>

2、vue提供的对象方法

通过真值判断是否应用这个class，注意尽量不要用对象键名的简写否则容易出错，观察也不便。如果键名中有短横线'-'则必须使用完整字符串形式, {'hello-class':'hello'}。

<!--HTML部分 -->
<div class="hello" :class="{'square':isSquare,'square-color':isColor}"></div>

<!--此时isSquare和isColor真值为真,等同于-->
<div class="hello square square-color"></div>

//data部分
data:{
   isSquare:true,
   isColor:1
}

还有一点，不要忘了对象的键值也是一个JS表达式，也就是说你可以这样写

<!--HTML部分 -->
<div class="hello" :class="{'square':isSquare="是方的"?1:false,
'square-color':isColor}"></div>

<!--此时isSquare和isColor真值为真,等同于-->
<div class="hello square square-color"></div>

//data部分
data:{
   isSquare:'是方的',
   isColor:1
}

是不是让人眼前一黑

3、数组对象写法

其实还有一个数组里包对象的，但其实多个class名，一个对象就能完成的,数组里套对象,好像有点脱裤子放屁，看你们要怎么使用吧。

<!--HTML部分 -->
<div class="hello" :class="[{'square':isSquare},
{'square-color':isColor}]"></div>

<!--此时isSquare和isColor真值为真,等同于-->
<div class="hello square square-color"></div>

JS表达式目的是提供一个值，也就是说你可以把这个值当成data里的变量，意味着你也可以整个对象/数组写在data里。

<!--HTML部分 -->
<div :class="divObject"></div>

//data部分
data:{
   divObject:{
    'hello':true,
    'isSquare':true
   }
}

是不是特别简单

只要是JS表达式的变式后面就不再展示了，请自行变通。

修改style属性

1、对象的写法(最推荐、最舒服的)

<!--HTML部分 -->
<div class="square" :style="{'background-color':isChange?'blue':'red',
'color':isChange?'white':'black'}">测试</div>

附上vscode截图因为csdn的代码块实在不怎么好看出来哪些是动态的变量

vscode截图

注意!CSS property 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，要用引号括起来)

所以以下同等效果，同时三目运算符后的字符串也能换成data中的数据。

<!--HTML部分 -->
<div class="square" :style="{backgroundColor:isChange?color_active:color_disactive,
color:isChange?textColor_active:textColor_disactive}">测试</div>

vscode截图

//date部分
data:{
   isChange:false,
   color_active:'blue',
   color_disactive:'red',
   textColor_active:'white',
   textColor_disactive:'black'
 }

2、数组对象写法

同样的，和class一样，有数组包对象的写法。

<!--HTML部分 -->
<div class="square" :style="[{'background-color':isChange?'blue':'red'},
{'color':isChange?'blue','red'}]"></div>

//date部分
data:{
   isChange:false,
   color_active:'blue',
   color_disactive:'red'
 }

当然，你一样可以利用JS表达式将对应的对象写在data里，这样属性多时候简洁一些，修改也可以直接修改对象里的属性。这样使用JS修改某个Style属性，区别于直接修改一整个class。

整活时间，超级变变变

看完上面，大家会发现，咦？style属性为什么没有直接提供一个字符串呢，当然有。

<div class="container" :style="isSquare?'background-color:blue':''"></div>

还能使用其他办法，模板字符串就派出用场了。模板字符串最后会解析成字符串，所以这也能当做一个JS表达式。

<div class="container" :style="`background-color:${isChange?'pink':'orange'}`"></div>
<!-- 或者这样 -->
<div class="container" :style="'background-color:'+`${isChange?'pink':'orange'}`"></div>

模板字符串中的插值语法${}和vue标签里的插值语法{{}}一样也是一种JS表达式，也就是开始套娃了。

所以多个属性时，可以使用模板字符串，因为使用了对象，所以需要注意冒号的写法不能包括在字符串里。

<div class="container" :style="{'background-color':`${isChange?'yellow':'green'}`,
'border-radius':`${isSquare?'50%':'0'}`}"></div>

以上的代码在某些语法检查中会提示错误导致下面的代码没有代码提示，不建议使用，但是不影响执行。

时间差不多，先分享到这，以后想起什么再继续写。手动码字不容易求个点赞，如有错，自己修改即可。

Genting丶incubus

关注

10
点赞
踩
83

收藏

觉得还不错? 一键收藏
1
评论
Vue 通过style属性、class属性来动态修改CSS样式

vue使用v-bind绑定style属性或class属性，动态修改CSS样式。动态修改style，动态修改class。
复制链接

扫一扫

Vue 通过style属性、class属性来动态修改CSS样式

前情提要

总结

修改class属性总结

修改style属性总结

修改class属性

修改style属性

整活时间，超级变变变

“相关推荐”对你有帮助么？