指令作用： 給元素的屬性賦值
它是一個 vue 指令，用於綁定 html 屬性
寫法：
正常寫法 <div v-bind:原屬性名="變量||"常量""></div> // 注意常量要引號內加引號 簡寫 <div :屬性名="變量"></div>
///1 綁定class 支持直接變量 數組 對象（判斷是否顯示）
Vue中的樣式數據綁定 // class的對象綁定 對象綁定鍵值對。value為綁定的值（控制是否顯示）。key直接是字符串的css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cssVariable {
color: red;
}
.font {
font-size: 40px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<article :class="{cssVariable: variableToggle,font:variableToggle}">test</article>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
variableToggle: true
}
})
</script>
</body>
</html>
class的數組綁定（動態在dom上添加刪除類，從而實現頁面效果的變更）數組綁定的就是css樣式類名 的變量（綁定在data）
同時支持data ['cssVariable', 'font']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cssVariable {
color: red;
}
.font {
font-size: 40px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<article :class="[cssVariable]">test</article>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
cssVariable:'cssVariable', //['cssVariable', 'font']
variableToggle: true
}
})
</script>
</body>
</html>
///2 綁定style 支持直接變量 數組 對象（對象的鍵為css屬性名字，value為綁定的變量）
style內聯樣式綁定（對象/數組）
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> //此處寫法有誤
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
//數組
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上