vue3中style新特性v-bind

在vue3.2中增加了一个style v-bind的特性，简单来说就是把我们script中的数据可以在style标签中使用

绑定变量为string 

<template>
  <div class="box">hello world</div>
</template>

<script setup  lang="ts">
import { ref } from 'vue'

const color = ref("red")

</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind("color");
}
</style>

绑定变量为object 

 

 

绑定boolean，可配合 三元表达式