[面试题]Vue怎样在style里使用data中的变量？

不管是面试官提问：Vue怎样在style里使用data中的变量，还是在实际开发中封装组件。在style里使用data中的变量，都是开发者必须掌握得一个技巧。具体如下：

vue2：

通过computed映射

<template>
    <div :style="cssVars" class="text">我变色了</div>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  },
  computed: {
    cssVars () {
      return {
        '--color': this.color
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
  color: var(--color);
}
</style>

vue3：

直接用v-bind

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

<script>
  export default {
    data() {
      return {
        color: 'red',
        font: {
          size: '2em'
        }
      }
    }
</script>

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

    /* expressions (wrap in quotes) */
    font-size: v-bind('font.size');
  }
</style>

 详情可见：

https://github.com/vuejs/rfcs/pull/231https://github.com/vuejs/rfcs/pull/231

js动态添加：

使用CSSStyleDeclaration.setProperty()方法

<template>
    <div class="text" ref="test">我变色了</div>
</template>

<script>
...
mounted() {
  this.$refs.test.style.setProperty('--colorStyle', this.color)
}
...
</script>

<style lang="scss" scoped>
.test {
  color: var(--colorStyle);
}
<style>