Vue动态改变css样式的3种方法总结
作者：肖邦的交响乐
这篇文章主要给大家介绍了关于Vue动态改变css样式的3种方法,在Vue.js中我们经常需要根据特定的条件或事件来动态地修改CSS样式,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式
1.class，三元表达式
根据三元表达式来动态的在两种样式间切换
:class="[occupation === '请选择' ? 'lh60' : 'lh61']"
css:
lh60: {
color:blue;
}
lh61: {
color:red;
}
2.:style=“xxxxx”,这里xxx可以是个函数，也可以是个计算属性
《1》 <!--HTML部分 -->
<div class="square" :style="{'background-color':isChange?'blue':'red',
'color':isChange?'white':'black'}">测试</div>
isChange是一个变量
注意!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》 style="handleStyle(second)”
......
handleStyle(deg) {
return { transform: "rotate(" + deg + "deg)" };
},
计算属性：
:style=“imgStyle”
......
computed: {
imgStyle() {
return {
padding: this.spacing + "px",
};
},
}
这两种方式很像，区别在于，使用方法的时候，视图刷新，函数就会重新计算一遍值。计算属性，会把以前的值缓存起来，没有变化，就不会计算，直接返回以前的值
总结
到此这篇关于Vue动态改变css样式的3种方法总结的文章就介绍到这了,更多相关Vue动态改变css样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！