vue：css使用data中的变量

如果要在css中使用变量，需要借助setProperty函数：

<template>
  <div class="home" ref="UI">
    <div class="header">hello world</div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      color: 'red'
    }
  },
  mounted () {
    this.setUI()
  },
  methods: {
    setUI () {
      this.$refs.UI.style.setProperty('--color', this.color) // 给变量赋值
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  text-align: center;
  margin: 10px auto;
  .header {
    color: var(--color); // 使用变量
    padding-top: 20px;
  }
}
</style>