VueJS：在样式中使用数据值

Question

如何在 <style>..</style> 中使用 data() 值？我尝试了几种组合（with/without this、with/without {{brackets}} 等，但无法正常工作。如果我输入 '#f00' 之类的值，而不是它工作正常。

我构建了一个这样的模板：

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


</template>

<style>
 ul.striped> li:nth-of-type(odd) {
    background-color: this.colors[0].backgroundcolor;  //dynamic value from data()
}
</style>

<script>

  data() {
    return {

        colors: [{'backgroundcolor':'#def'}], //simplified version for explanation
[..]
</script>

Answer 1

与 Vue 3.2 release you can just use State-Driven Dynamic CSS 一样 :

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

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: v-bind('colors[0]')
    }
</style>

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

如果您使用的是 Vue 2，您可以像这样使用 CSS custom properties :

<template>
    <ul class="striped" :style="`--color: ${colors[0]}`">
        <li>foo</li>
        <li>bar</li>
        <li>foobar</li>
    </ul>
</template>

<style>
    ul.striped> li:nth-of-type(odd) {
        background-color: var(--color)
    }
</style>

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

VueJS：在样式中使用数据值

VueJS: use data value in style

css

styles

vue.js