首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3在css中使用js变量

Vue3在css中使用js变量及其原理解读

2023-09-13 12:24:54 作者：静尾

这篇文章主要介绍了Vue3在css中使用js变量及其原理解读,结合实例代码介绍了vue3中css使用script中定义的变量的方法，本文给大家介绍的非常详细，需要的朋友可以参考下

Vue3在css中使用js变量及其原理解读

实现原理

首先css中是有变量的，可以像js变量一样在style中使用，然后Vue3支持将js中的变量传入style中，相当于在css中创建了同名的变量，值绑定到js变量上，后续会跟着js中的变量一同响应式变化。

CSS变量介绍

CSS变量的声明方式：

--color: red;

CSS变量的使用方式：

h1 {
	color: var(--color); 
}

作用域：

body {  
	--color: red; 
} 
h1 {  
	color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
} 
div {  
	--color: blue;  
	color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/ 
}

变量的作用域就是它所在的选择器的有效范围。

默认值：

div { width: var(–width, 100px) }

假如没有定义 --width 变量，那么就会取第二个参数的值，这就很适合我们用来封装组件。

在 vue3 的 <style> 中使用 <script> 里的变量的方式

创建一个 vite 项目（vue-cli创建的不可）:

npm init vite-app vars

项目初始化

编写代码：

<template>
  <h1>Vue</h1>
</template>
<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>
<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

且在style中的变量也是响应式的。

原理：vue控制的是元素的style属性，使其动态变化。

使用全局变量的方式：

<style vars="{ color }" scoped>
h1 {
  color: var(--global:color);
}
</style>

兼容性：不兼容IE

vue3中css使用script中定义的变量

代码

<template>
  <div class="box">haha</div>
</template>
<script setup lang="ts">
const boxWidth = '500px'
</script>
<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

效果

在这里插入图片描述

到此这篇关于Vue3在css中使用js变量及其原理解读的文章就介绍到这了,更多相关vue3在css中使用js变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue3在css中使用js变量及其原理解读