vue怎么在style中使用data中定义的变量

需求

动态修改三方组件的样式。

思路

项目开发中使用的某某某三方ui组件，所以想要修改这个组件的样式只能通过css进行修改，那么想要动态修改，就要在style中使用data里的变量。

实现

<script>
...
mounted() {
  this.$el.style.setProperty('--colorStyle', this.color)
}
//若该变量是动态变化的
watch: {
  color(val, oldVal) {
    this.$el.style.setProperty('--colorStyle', val)
  }
}
...
</script>

<style lang="scss" scoped>
/deep/ .class名称 {
  color: var(--colorStyle);
}
<style>
//或者不加scoped
<style lang="scss">
.class名称 {
  color: var(--colorStyle);
}
<style>