vue中通过js控制scss变量

<template>
  <div height="100%" class="b">
    <input type="text" v-model="val">
    <Application  :style="`--bgC: ${val}`">    Application>
  div>
template>

<script>
const bindPhoneIndex = 3;
export default {
  name: "App",
  data() {
    return {
      val: ''
    };
  }
};
script>

<style lang="scss">
:root {
  --bgC: red;
}
.btnName {
  background: #000 ;
  background: var(--bgC);
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36