Vue3 动态修改CSS样式（包含style class）- 附示例

在日常的开发过程中，CSS 样式根据某个变量的状态或者是变量值的改变而展示不同的属性值是很常见的，故在此记录一些常用的使用场景。

目录

效果

 一、介绍

1、官方文档：Class 与 Style 绑定 | Vue.js

2、官方示例

二、示例

1、class

        1）动态 class – 真假值

        2）class – 绑定 ref

        3）class – 绑定对象

        4）class – 计算属性

        5）class – 数组形式

        6）动态 class – 三元表达式

        7）(动态 class – 三元表达式) + 固定 class

2、style        

        1）style – 绑定变量

        2）style- 绑定对象

        3）style – 数组形式

        4）style – 样式多值​

        5）动态 style – 三元表达式

        6）动态 style – 数组对象 + 三元表达式

        7）动态 style – 模板字符串（写法一）

        8）动态 style – 模板字符串（写法二）

          9）动态 style – 模板字符（多属性）

 欢迎扫描下方二维码关注 VX 公众号

---

效果

 一、介绍

1、官方文档：Class 与 Style 绑定 | Vue.js

Class 与 Style 绑定 | Vue.jsVue.js – 渐进式的 JavaScript 框架 https://cn.vuejs.org/guide/essentials/class-and-style.html

2、官方示例

​

二、示例

注：以下示例的样式切换都是基于 ，具体代码在 1、的 3）部分展示

1、class

        1）动态 class – 真假值

        2）class – 绑定 ref

        3）class – 绑定对象

注：这里用了 Element-plus 的 Switch 开关组件，CSS 样式根据开关的状态而变化

Switch 开关 | Element Plus

        4）class – 计算属性

        5）class – 数组形式

        6）动态 class – 三元表达式

        7）(动态 class – 三元表达式) + 固定 class

2、style        

        1）style – 绑定变量

        2）style- 绑定对象

        3）style – 数组形式

        4）style – 样式多值​

        你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：

        数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。

        5）动态 style – 三元表达式

        6）动态 style – 数组对象 + 三元表达式

        7）动态 style – 模板字符串（写法一）

        8）动态 style – 模板字符串（写法二）

          9）动态 style – 模板字符（多属性）

参考：

Class 与 Style 绑定 | Vue.js

​​​​​​Vue 通过 style 属性、class 属性来动态修改 CSS 样式_vue 动态修改 css 样式 -CSDN 博客

 欢迎扫描下方二维码关注 VX 公众号