Vue3在css中使用js变量及其原理解读
更新时间：2023年09月13日 14:14:13 作者：静尾
这篇文章主要介绍了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变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何基于vue实现动态Tab标签页功能,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
随着 Vue 3.3 引入的 defineModel 宏,开发者可以更加简洁地实现组件内部的双向数据绑定,下面就跟随小编一起来学习一下如何使用defineModel实现双向绑定吧2024-12-12
element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)
这篇文章主要介绍了element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则),本篇文章记录el-table增加一行可编辑的数据列,进行增删改,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了详解vue.js全局组件和局部组件，实例分析了全局组件和局部的技巧，有兴趣的可以了解一下。2017-04-04
这篇文章主要为大家详细介绍了VUE实现吸底按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了如何解决vue项目打包后文件过大问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue2更改data里的变量不生效时,深层更改data里的变量问题
这篇文章主要介绍了vue2更改data里的变量不生效时,深层更改data里的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了Vue+SpringBoot实现支付宝沙箱支付的示例代码，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
最新评论