vue项目中在scss代码中使用data中的变量

尽管在日常开发中,这类情况实际上很少出现。

VUE2:

在HTML中使用时,请确保将cssVars绑定在需要使用CSS变量的元素或该元素的上层元素上。

html 复制代码
<template>
  <div :style="cssVars">
    <div class="test"/></div>
  </div>
</template>

在data或者compute中给出前缀为--的css变量对象

javascript 复制代码
computed: {
  cssVars() {
    return {
      '--color1': 'red',
      '--color2': 'blue'
    };
  }
}

在css代码中使用

css 复制代码
<style lang="scss" scoped>
.test {
  /deep/ .el-form-item__label {
    color: var(--color) !important;
  }
}
</style>

vue3(v-bind CSS变量注入):

css 复制代码
<template>
  <span> style v-bind CSS变量注入</span>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const color = ref('green')
</script>
<style scoped>
  span {
    /* 使用v-bind绑定组件中定义的变量 */
    color: v-bind('color');
  }
</style>
相关推荐
三十_2 分钟前
TypeORM 多对多关联篇:中间表、JoinTable 与复杂关系的建模
前端·后端
用户6883362059703 分钟前
移动端 Web 性能调优:viewport、dvh 与触控优化解析
前端
console.log('npc')8 分钟前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐12 分钟前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
前端付豪15 分钟前
项目启动:搭建Vue 3工程化项目
前端·javascript·vue.js
Asort17 分钟前
JavaScript设计模式(二十)——状态模式 (State):复杂状态管理的优雅解决方案
前端·javascript·设计模式
小琴爱减肥27 分钟前
Vue3 组合式 API 实战
vue.js
im_AMBER33 分钟前
React 07
前端·笔记·学习·react.js·前端框架
Giant10040 分钟前
Node.js .env 配置指南:安全管理项目秘钥与多环境适配
前端
沢田纲吉42 分钟前
《LLVM IR 学习手记(七):逻辑运算与位运算的实现与解析》
前端·c++·编译器