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变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇axios的拦截请求与响应方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue滑动解锁组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue.js自定义组件directives的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
今天小编就为大家分享一篇Vue2.0 v-for filter列表过滤功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用vue.js实现checkbox的全选和多个的删除功能,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了django使用channels2.x实现实时通讯，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了如何在vue 中使用柱状图 并自修改配置，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下2019-04-04
Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的结合使用,提供了解决SEO问题的方案,prerender-spa-plugin通过预渲染技术生成静态HTML,而vue-meta-info则能动态管理页面元数据,本文将探讨如何使用这两个工具优化Vue.js项目的SEO表现,包括安装、配置及注意事项2024-10-10
最新评论