[vue3新特性] 13.style v-bind

在vue3.2中增加了一个style v-bind的特性，简单来说就是把我们script中的数据可以在style标签中使用，下面我们来写一个最简单的例子
我们定义一个color数据，它的值是red，然后在style标签中使用它：

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

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind(color);
}
</style>

页面上显示

如果我们把color改成绿色：

const color = ref('red')
color.value = 'green' // 新增

然后文字就会变成绿色：

是不是非常简单。
实际上这个功能的原理就是使用了css自定义属性，
不了解的同学可以看这里
在使用v-bind时，vue给这个标签创建了一个自定义属性，在css中使用了这个css属性的值，
这个css属性的值是变化的，我们的css内容其实还是静态的。
下面就是定义的css属性，它的值是根据我们的数据动态变化的：

css其实还是静态的，它里面使用了css自定义属性的值：

这个功能我觉着最常用的就是一个元素的状态了，比如说我们上面这个.box元素，正常状态背景是白色的，激活状态是红色的。
以前我们做这个功能时，需要定义一个正常状态的class，还有一个激活状态的class，根据数据的值来绑定激活的这个class。
现在就不用这么做了，直接把判断写在style里面，
需要注意的是，v-bind里面写的js表达式必须使用引号包起来
下面就来写一个最基础的例子：

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

<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: v-bind('isActive?"red": "white"');
}
</style>

这样在isActive是true的时候，box的背景颜色就是红色了

style v-bind使用就是这么简单了。