当前位置： 首页 > news >正文

Vue中动态样式绑定+CSS变量实现切换明暗主题功能——从入门到进阶

news 2025/6/30 22:11:17

1.直接借助Vue的动态绑定样式绑定

Vue动态样式绑定

在Vue中，动态样式绑定是一种强大的功能，它允许开发者根据数据的变化动态地更新元素的样式。以下是对Vue动态样式绑定的详细知识梳理与详解：

一、基础知识

Vue的动态样式绑定主要通过v-bind:style（或简写为:style）指令来实现。通过该指令，可以将样式属性与Vue组件中的数据进行绑定，从而实现样式的动态变化。

二、对象语法

对象语法是动态样式绑定中最直观且常用的方法。它允许开发者通过对象的属性和值来动态设置样式。

  1. 基本用法
<template><div :style="styleObject">Hello World</div>
</template><script>
export default {data() {return {styleObject: {color: 'red',fontSize: '14px'}};}
};
</script>

在上面的例子中，styleObject是一个包含样式属性和值的对象。当styleObject的属性值发生变化时，<div>元素的样式也会相应地发生变化。

  1. 驼峰式与短横线分隔式

Vue中的样式属性可以是驼峰式（如fontSize）或短横线分隔式（如font-size）。在模板中，推荐使用短横线分隔式，因为这与CSS中的写法保持一致。但在JavaScript对象中，由于驼峰式是标准的属性命名方式，所以也可以使用驼峰式。Vue会自动将驼峰式属性转换为短横线分隔式。

三、数组语法

数组语法允许开发者结合多个样式对象，这在需要组合多种条件下的样式时非常有用。

  1. 基本用法
<template><div :style="[baseStyles, overridingStyles]">Hello World</div>
</template><script>
export default {data() {return {baseStyles: {color: 'blue',fontSize: '14px'},overridingStyles: {color: 'green'}};}
};
</script>

在上面的例子中，baseStyles和overridingStyles是两个包含样式属性的对象。当它们被组合在一起并绑定到<div>元素的style属性上时，overridingStyles中的样式会覆盖baseStyles中相同属性的样式。

四、条件样式

条件样式允许开发者根据条件动态地改变样式。这可以通过三元表达式、计算属性或方法来实现。

  1. 三元表达式
<template><div :style="{ color: isActive ? 'green' : 'red' }">Hello World</div>
</template><script>
export default {data() {return {isActive: true};}
};
</script>

在上面的例子中，isActive是一个条件变量。当isActive为true时，<div>元素的文字颜色为绿色；当isActive为false时，文字颜色为红色。

  1. 计算属性

计算属性可以将复杂的样式逻辑封装起来，使模板更加简洁。

<template><div :style="computedStyles">Hello World</div>
</template><script>
export default {data() {return {isActive: true};},computed: {computedStyles() {return {color: this.isActive ? 'green' : 'red',fontSize: '14px'};}}
};
</script>

在上面的例子中，computedStyles是一个计算属性，它根据isActive的值动态计算样式并返回。

五、结合类名与内联样式

在Vue中，还可以将动态样式与外部样式表结合使用。这可以通过动态地添加或移除类名来实现。

  1. 对象语法绑定类名
<template><div :class="{ active: isActive }">Hello World</div>
</template><script>
export default {data() {return {isActive: true};}
};
</script><style>
.active {font-weight: bold;
}
</style>

在上面的例子中，当isActive为true时，<div>元素会添加active类名，从而应用.active样式。

  1. 数组语法绑定多个类名
<template><div :class="[classOne, classTwo]">Hello World</div>
</template><script>
export default {data() {return {classOne: 'class-a',classTwo: 'class-b'};}
};
</script><style>
.class-a {color: red;
}.class-b {font-size: 20px;
}
</style>

在上面的例子中，classOne和classTwo是两个数据属性，它们的值分别是样式类名。通过数组语法，可以将这两个样式类同时应用到一个元素上。

六、实际应用场景

动态样式绑定在Vue中有广泛的应用场景，如：

  • 响应式设计：根据屏幕尺寸动态调整样式。
  • 交互效果：根据用户操作（如点击、悬停）动态改变样式。
  • 状态显示：根据数据状态（如错误提示、成功信息）动态应用样式。
  • 主题切换：根据用户选择动态切换不同的主题样式。

七、主题切换实现

<template><el-header class="header" :style="style1"></el-header>
</template>
<script setup lang="ts">
const variables = reactive({//默认主题颜色'dark': '#374151',//鲜明色'light': '#ffffff'
})
const curTheme=ref("dark")let color=computed(()=>{return variables[curTheme.value];
})
// 使用 computed 动态计算样式
const style1 = computed(() => {return {'background-color': color.value}
})
const toggleTheme=()=>{
curTheme.value=curTheme.value==="dark"?"light":"dark";
}
</script>
<style>
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;
}
</style>

2.Vue中样式绑定动态变量传递给CSS {’–bg’:color}

Vue中CSS动态样式绑定

<template><el-header class="header" :style="{'--bg':color}"></el-header>
</template>
<script setup lang="ts">
const variables = reactive({//默认主题颜色'dark': '#374151',//鲜明色'light': '#ffffff'
})
const curTheme=ref("dark")let color=computed(()=>{return variables[curTheme.value];
})</script>
<style>
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;background-color: var(--bg);
}
</style>

3.利用SCSS变量+动态类样式切换:class="[‘header’,curTheme]"

3.1定义css变量

//variable.css
//默认主题颜色
$dark: #374151;
//鲜明色
$light:#ffffff;
$header-default-height:20%;

3.2导入scss文件

<style scoped lang="scss">
@import "src/assets/styles/variables";
</style>

3.3使用css变量构建不同类样式

<style scoped lang="scss">
@import "src/assets/styles/variables";
.light{background-color:$light;
}
.dark{background-color:$dark;
}
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;
}
</style>

3.4 设置切换逻辑

<script setup lang="ts">
const curTheme=ref("dark")
const toggleTheme=()=>{
curTheme.value=curTheme.value==="dark"?"light":"dark";
}
</script>

3.5绑定动态类样式

<template><el-header :class="['header',curTheme]"></el-header></template>

4.修改scss变量值

在 Vue 中，你可以通过直接修改 CSS 变量的值来实现主题切换。CSS 变量（也称为自定义属性）允许你在 CSS 中定义可以在整个文档或特定元素范围内重用的值。通过 JavaScript，你可以动态地改变这些变量的值，从而改变页面的样式。

以下是一个简单的例子，展示了如何在 Vue 组件中通过修改 CSS 变量的值来切换主题：

  1. 在 CSS/SCSS 中定义 CSS 变量：

首先，在你的全局样式文件（如 styles.scss 或直接在组件的 <style> 标签内）中定义 CSS 变量。

:root {--primary-color: #374151; // 默认主题颜色--background-color: #f0f0f0; // 默认背景颜色
}.dark-theme {--primary-color: #ffffff; // 深色主题颜色--background-color: #374151; // 深色背景颜色
}

注意：虽然 .dark-theme 类在这里被定义了，但我们稍后将通过 JavaScript 直接修改根元素的 CSS 变量，而不是切换类名。

  1. 在 Vue 组件中：

在你的 Vue 组件中，你可以通过 mounted 钩子、计算属性或方法来访问和修改这些 CSS 变量的值。

<template><div :class="[isDarkTheme ? 'dark-theme-indicator' : '']"><!-- 你的内容 --><button @click="toggleTheme">切换主题</button></div>
</template><script>
export default {data() {return {isDarkTheme: false, // 初始主题为浅色};},methods: {toggleTheme() {this.isDarkTheme = !this.isDarkTheme;this.updateThemeVariables();},updateThemeVariables() {const root = document.documentElement;root.style.setProperty('--primary-color', this.isDarkTheme ? '#ffffff' : '#374151');root.style.setProperty('--background-color', this.isDarkTheme ? '#374151' : '#f0f0f0');},},mounted() {// 初始化主题（可选）this.updateThemeVariables();},
};
</script><style scoped>
/* 你可以在这里添加一些基于 CSS 变量的样式 */
.dark-theme-indicator {/* 只是一个指示器，用于显示当前是深色主题 */border: 1px solid red; /* 仅为示例 */
}/* 使用 CSS 变量 */
body {background-color: var(--background-color);color: var(--primary-color);
}/* ... 其他样式 ... */
</style>

在这个例子中，toggleTheme 方法会切换 isDarkTheme 的值，并调用 updateThemeVariables 方法来更新 CSS 变量的值。updateThemeVariables 方法通过访问 document.documentElement（即 <html> 元素）并设置其 style.setProperty 方法来更改 CSS 变量的值。

注意，虽然我们在组件中定义了 .dark-theme 类，但实际上并没有将其应用到任何元素上。这是因为我们直接通过 JavaScript 修改了 CSS 变量的值，而不是通过切换类名来改变样式。不过，你仍然可以保留这个类作为一个指示器或用于其他目的（比如添加一些仅在深色主题下显示的额外样式）。

另外，请注意，如果你的项目中使用了 SCSS，并且你希望在 SCSS 文件中使用这些变量，你需要确保在编译 SCSS 时这些变量已经被定义。由于 CSS 变量是在运行时通过 JavaScript 修改的，SCSS 编译时无法知道它们的最终值。因此，你通常会在全局样式表或组件的 <style> 标签中定义这些变量，并在 JavaScript 中动态地修改它们。

注意事项

有些时候明明导入scss，但确发现不起作用，还是找不到css变量！！！
在这里插入图片描述
在这里插入图片描述
考虑CSS 文件加载顺序问题，是真的先加载scss文件了吗？
如果你的 CSS 变量定义在一个后加载的 CSS 文件中，而你在一个先加载的 CSS 文件或 JavaScript 代码中尝试访问它，那么就会出现未定义的错误。确保定义变量的 CSS 文件在访问变量的文件之前被加载。
不妨定义一个全局的变量并在main.ts就导入（虚拟DOM生成前就导入）
在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/510873.html

相关文章：

  • vue3 video 播放rtmp视频？（360浏览器支持）
  • RK356x bsp 7 - PCF8563 RTC调试记录
  • 定义Shape：打造属于你的独特图形
  • JavaWeb（一） | 基本概念（web服务器、Tomcat、HTTP、Maven）、Servlet 简介
  • python学opencv|读取图像（二十一）使用cv2.circle()绘制圆形进阶
  • CLIP：连接文本与图像， 从自然语言监督中学习可迁移的视觉模型
  • Linux 硬盘扩容 分区 挂载
  • 基于 Slf4j 和 AOP 的自动化方法执行时间日志记录方案
  • 关于 K8s 的一些基础概念整理-补充【k8s系列之二】
  • FPGA的DMA应用——pcileech
  • 信息安全管理：运行管理checklist
  • Linux系统之stat命令的基本使用
  • 云手机+Facebook：让科技与娱乐完美结合
  • 为什么要在PHY芯片和RJ45网口中间加网络变压器
  • LeetCode 19:删除链表的倒数第N 个结点
  • RT-DETR融合[IJCV2024]LSKNet中的LSKBlock模块
  • C/C++ 数据结构与算法【树和森林】 树和森林 详细解析【日常学习，考研必备】带图+详细代码
  • 新浪微博大数据面试题及参考答案（数据开发和数据分析）
  • OpenHarmony怎么修改DPI密度值？RK3566鸿蒙开发板演示
  • SAP GUI Scripting - 如何判断组件是否存在
  • Go 计算Utf8字符串的长度 不要超过mysql字段的最大长度
  • llamafactory报错：双卡4090GPU，训练qwen2.5:7B、14B时报错GPU显存不足（out of memory），轻松搞定~~~
  • 全局webSocket 单个页面进行监听并移除单页面监听
  • JVM调优实践篇
  • 【JavaEE】Spring Web MVC
  • VSCode 插件开发实战（七）：插件支持了哪些事件，以及如何利用和监听这些事件
  • 指针详解之 多层嵌套的关系
  • Animated Drawings：让纸上的角色动起来
  • 技术与教育的结合：高校听课评价系统的设计与实施
  • web移动端项目常用解决方案