在Vue组件里的Style中如何引用data中的数据

1.简介

通过vue的学习，我们知道要使data中的样式数据能够在页面中生效，我们可以通过动态绑定标签的style或者class进行处理，但是通过这种操作进行的话，在需要绑定多个样式的时候，操作较为麻烦。那么有没有一种方法，使我们能够在style标签里面直接写data数据中的样式呢？话不多说，下面直接上代码。

2.示例

1. template中的代码如下所示：

<template>
  <div id="app">
    <h1 ref="content">
      小白要努力变强！！！
    </h1>
  </div>
</template>

2. script中的代码如下所示：

<script>
export default {
  name: 'App',
  data() {
    return {
      color: 'red'
    }
  },
  mounted() {
    this.$refs.content.style.setProperty('--color',this.color)
  }
}
</script>

3. style中代码如下所示：

<style>
  h1 {
    color: var(--color);
  }
</style>

4. 效果如下图所示：
   
   效果图
   
   至此，在Style中引用data中的数据已完成，希望能够帮助您！！！

自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！