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>