在vue3.2中增加了一個style v-bind的特性，簡單來說就是把我們script中的數(shù)據(jù)可以在style標(biāo)簽中使用，下面我們來寫一個最簡單的例子
我們定義一個color數(shù)據(jù)，它的值是red，然后在style標(biāo)簽中使用它：
<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自定義屬性，
不了解的同學(xué)可以看這里
在使用v-bind時，vue給這個標(biāo)簽創(chuàng)建了一個自定義屬性，在css中使用了這個css屬性的值，
這個css屬性的值是變化的，我們的css內(nèi)容其實還是靜態(tài)的。
下面就是定義的css屬性，它的值是根據(jù)我們的數(shù)據(jù)動態(tài)變化的：
css其實還是靜態(tài)的，它里面使用了css自定義屬性的值：
這個功能我覺著最常用的就是一個元素的狀態(tài)了，比如說我們上面這個.box元素，正常狀態(tài)背景是白色的，激活狀態(tài)是紅色的。
以前我們做這個功能時，需要定義一個正常狀態(tài)的class，還有一個激活狀態(tài)的class，根據(jù)數(shù)據(jù)的值來綁定激活的這個class。
現(xiàn)在就不用這么做了，直接把判斷寫在style里面，
需要注意的是，v-bind里面寫的js表達(dá)式必須使用引號包起來
下面就來寫一個最基礎(chǔ)的例子：
<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使用就是這么簡單了。
