vue提供的v-bind()函数

最新推荐文章于 2025-06-14 16:01:05 发布

魉厶箔

最新推荐文章于 2025-06-14 16:01:05 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏：困惑之余又有些许收获文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liang_si_bo/article/details/132863397

困惑之余又有些许收获专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue中使用CSS函数v-bind实现数据驱动的CSS属性绑定，比较了Vue3和Vue2的用法，并提到了结合Vuex或Pinia进行组件主题动态切换的小技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

这是vue提供的CSS函数，目的是能够更简洁的通过代码动态实现CSS属性的绑定。
官方介绍：实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

基本步骤

vue3：

import { ref } from 'vue'
<script setup>
const color = ref('red')
</script>
<template>
  <p>hello</p>
</template>
<style scoped>
p { color: v-bind('color'); }
</style>

vue2：

<template>
  <p>hello</p>
</template>
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>
<style>
p { color: v-bind(color); }
</style>