vue使用v-bind绑定样式

直接看例子：在App.vue中显示如下内容：

<template>
  <p>hello</p>
</template>
<script setup>
import {ref} from "vue";
const height = ref('100px')
const red = ref('red')
const theme = {
  color: 'pink'
}
</script>

<style scoped>
p {
  height: v-bind(height);
  width: 300px;
  color: v-bind(red);
  /*background-color: v-bind('theme.color');*/
  /*这两种写法都可以*/
  background-color: v-bind(theme['color']);
  text-align: center;
  line-height: 100px;
  font-size: 30px;
}
</style>

显示结果如下：