（9）打鸡儿教你Vue.js

样式绑定

设置元素的样式 用 v-bind 来设置样式属性 class 与 style 是 HTML 元素的属性

代码语言：javascript复制

<div v-bind:class="{ active: isActive }"></div>

代码语言：javascript复制

<div class="active"></div>

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

<div v-bind:class="[activeClass, errorClass]"></div>

代码语言：javascript复制

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

v-bind:style 直接设置样式

代码语言：javascript复制

<div v-bind:style="{ color: activeColor, fontSize: fontSize   'px' }">

代码语言：javascript复制

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>

html bind class

0 人点赞