style中的v-bind

状态驱动的动态 CSS：单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上。

<script>
export default {
  data() {
    return {
      height: '50px'
    }
  }
}
</script>

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  height:v-bind(height);
  color: v-bind('theme.color');/*使用<script setup>时，支持 JavaScript 表达式，但需要用引号包裹起来*/
}
</style>