vue中通过js控制scss变量

<!--* @Description:* @Author: 李大玄* @Date: 2022-07-28 20:34:43* @FilePath: /web-framework-demo/src/views/layout.vue* @LastEditors: 李大玄* @LastEditTime: 2022-11-01 09:25:31
-->
<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>