vue.js 样式绑定

style(外联样式)

语句： v-bind:class="classStyle";

• classStyle可为对象
  默认：属性样式冲突时，后覆盖前。

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})

• classStyle可为数组

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

style(内联样式)

语句： v-bind:style="style";

• style同外联样式，可为对象，可为数组。

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">哈哈哈</div>
</div>