v-bind 主要用于属性绑定
1、在不使用v-bind时 样式静态效果
<div class="red">静态</div>
2、v-bind的动态写法
<div :class="redCls">动态</div>
3、v-bind的对象写法
<div :class="{ red: false, blue: false, green: fn() }">object</div>
fn() {
return true;
},
4、v-bind的数组写法
<div :class="['red', 'fs']">arr</div>
<div :class="[redCls, fss]">arr2</div>
redCls: "red",
fss: "fs",
5、v-bind绑定style属性
<div :style="{color:redCls,fontSize:'100px'}">style</div>
style样式
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.fs {
font-size: 60px;
}