指令作用： 给元素的属性赋值
它是一个 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 的数组语法可以将多个样式对象应用到同一个元素上