VueJS如何在style标签中使用data()定义的响应式数据？

核心原因 #

<style> 标签内的内容为纯静态CSS，运行时无法直接访问Vue组件实例的data属性，因此直接写this、双花括号等写法都不会被识别解析。

通用兼容方案（支持Vue2/Vue3） #

通过CSS自定义变量注入实现，支持伪类、媒体查询等所有原生CSS语法，适配性最强：

• 第一步：在目标元素的父节点上通过行内样式绑定，注入动态CSS变量
• 第二步：在<style>中通过var()函数调用对应的变量即可

示例代码：

<template>
 <!-- 注入自定义CSS变量 -->
 <ul class="striped" :style="{'--odd-li-bg': colors[0].backgroundcolor}">
     <li>foo</li>
     <li>bar</li>
     <li>foobar</li>
 </ul>
</template>

<style>
 ul.striped > li:nth-of-type(odd) {
    /* 调用注入的CSS变量 */
    background-color: var(--odd-li-bg);
}
</style>

<script>
export default {
  data() {
    return {
        colors: [{'backgroundcolor':'#def'}]
    }
  }
}
</script>

Vue3专属简化方案 #

Vue3原生支持在<style>中直接通过v-bind()绑定组件实例的响应式属性，无需手动注入CSS变量：

<template>
 <ul class="striped">
     <li>foo</li>
     <li>bar</li>
     <li>foobar</li>
 </ul>
</template>

<style>
 ul.striped > li:nth-of-type(odd) {
    /* 直接绑定data属性，属性路径需用引号包裹 */
    background-color: v-bind('colors[0].backgroundcolor');
}
</style>

<script>
export default {
  data() {
    return {
        colors: [{'backgroundcolor':'#def'}]
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Dominic