Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)

更新时间：2024年04月15日 10:13:23 作者：1024小神

v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下

特别提醒

如果你想在scss中或者less中使用，可能会报各种乱七八糟的错误，最快最好用的方式就是单独定义一个style标签，直接使用css模式使用变量就好了：

或者在scss的style最外层使用，不然不起作用还报错：

常规使用方式

单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

总结

到此这篇关于Vue3在css中使用v-bind绑定js/ts变量的文章就介绍到这了,更多相关Vue3用v-bind绑定js/ts变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue组件的路由高亮问题解决方法
这篇文章主要给大家介绍了关于vue组件的路由高亮问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue hash模式改成history,同时实现spa预渲染问题
这篇文章主要介绍了vue hash模式改成history,同时实现spa预渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
Python实现图片二值化的详细代码
图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255],即要么纯黑,要么纯白,这篇文章主要介绍了Python实现图片二值化,需要的朋友可以参考下
2024-05-05
Vue数组的劫持逐步分析讲解
小编这次要给大家分享的是如何实现vue2.x数组劫持，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获
2023-01-01
Vue入门实战之天气预报
这篇文章主要为大家详细介绍了Vue入门实战之天气预报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue实现3D环形图效果
这篇文章主要为大家详细介绍了vue实现3D环形图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
这篇文章主要介绍了使用vue-cli3 创建vue项目，并配置VS Code 自动代码格式化 vue语法高亮问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
vue 项目优雅的对url参数加密详解
这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
Vue中实现过渡动画效果示例代码
这篇文章主要介绍了Vue中实现过渡动画效果示例代码,Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果，需要的朋友可以参考下
2022-08-08
Vue2.2.0+新特性整理及注意事项
本文是小编精心给大家收藏整理的关于Vue2.2.0+新特性,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08