vue指令 v-bind的特殊样式的使用

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;
}