V-bind 及 class与style绑定

绑定class的几种方式

对象语法

对象中可以传入一个或多个属性，来动态切换class。
:class内的表达式每项为真时，对应的类名就会加载。
如果:class的表达式过长或者逻辑复杂的时候可以使用计算属性。

示例代码

<template>
<div>
 <div :class="{'active':active}"></div>
 <div :class="{'isActive':isActive,'error':error}"></div>
<div :class="classes">class</div>
</div>
</template>
<script>
export default {
  name: "Class",
  data() {
    return {
      active: true,
      error: false,
      isActive: true
    };
  },
  computed: {
    classes: function() {
      return {
        active: this.active && !this.error,
        font: this.active && this.isActive
      };
    }
  }
};
</script>
<style scoped>
.active {
  padding: 20px;
  background-color: aquamarine;
}
.error {
  padding: 20px;
  background-color: bisque;
}
.isActive {
  padding: 20px;
  background-color: aliceblue;
}
.font {
  font-size: 25px;
}
.class1 {
  padding: 20px;
  background-color:cyan;
}
.class2 {
  font-size: 25px;
}
</style>

数组语法

当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表。
可以使用三元表达式来根据条件切换class。

示例代码

 <template>
<div>
 <div :class="{'active':active}"></div>
 <div :class="{'isActive':isActive,'error':error}"></div>
 <div :class="classes">class</div>
 <div :class="[class1,class2]">class arr</div>
  <div :class="[isActive?class2:class1]">classes</div>
</div>
</template>
<script>
export default {
  name: "Class",
  data() {
    return {
      active: true,
      error: false,
      isActive: true,
      class1: "class1",
      class2: "class2"
    };
  },
  computed: {
    classes: function() {
      return {
        active: this.active && !this.error,
        font: this.active && this.isActive
      };
    }
  }
};
</script>
<style scoped>
.active {
  padding: 20px;
  background-color: aquamarine;
}
.error {
  padding: 20px;
  background-color: bisque;
}
.isActive {
  padding: 20px;
  background-color: aliceblue;
}
.font {
  font-size: 25px;
}
.class1 {
  padding: 20px;
  background-color:cyan;
}
.class2 {
  font-size: 25px;
}
</style>

绑定内联样式

使用v-bind:style(:style)可以给元素绑定内联样式，方法和:class类似，也有对象语法和数组语法。