Vue3.2 style标签内可绑定变量和v-deep的使用

从 Vue.js3.2 开始，可以将 JavaScript 变量绑定为 CSS 变量。这意味着可以动态设置 CSS 值。

如下面的例子：

<script setup lang="ts">
const color = ref('#000000')
</script>

<template>
  <div>
      <h1 class="title">选取颜色</h1>
      <input type="color" v-model="color" />
  </div>
</template>

<style scoped>
.title {
    color: v-bind(color);
}
</style>

我们声明的color变量，可以在<style>标签中，用v-bind(color)绑定。

查看生成的 CSS：

![image.p