v-bind绑定class和style

v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

绑定HTML Class

对象方法

可以动态的新增或删除class

• v-bind:class="{active: isActive}" 如果vm.isActive为true则渲染class active
• v-bind:class也可以与普通class共存
• v-bind:class="classObject" classObject对象可以写在js里
• v-bind:class="classObject" classObject也可以是计算属性

<div id="app">
  <!-- <div class="red active"></div> -->
  <div v-bind:class="myclass"></div>

  <!-- 对象语法 -->
  <div v-bind:class="{active: isActive}"></div>
  <div class="red" 
        v-bind:class="{active: isActive, 'text-danger': hasError}">
  </div>
  <div v-bind:class="classObject"></div>
  <div v-bind:class="classObjectComputed"></div>

</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      myclass: "red active",
      isActive: true,
      hasError: false,
      classObject: {
        active: true,
        'text-danger': false
      }
    },
    computed: {
      classObjectComputed: function() {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  })
</script>

数组语法

• v-bind:class="[activeClass, errorClass]" activeClass、errorClass的值则为class
• 内部可以使用三元运算符
• 对于多个条件，可以在数组中使用对象语法

<div id="app">
  <!-- 数组语法 -->
  <!-- <div class="active text-danger"></div> -->
  <div v-bind:class="[activeClass, errorClass]"></div>

  <!-- 内部可以使用三元表达式-->
  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

  <!--多个条件会比较繁琐，在数组中也可以使用对象语法 -->
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>

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

用在组件上

<div id="app">
  <!-- <p class="foo bar baz boo"></p> -->
  <my-component class="baz boo"></my-component>

  <!-- <p class="foo bar active"></p> -->
  <my-component v-bind:class="{ active: isActive }"></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<p class="foo bar"></p>'
  })

  var vm = new Vue({
    el: '#app',
    data: {
      isActive: true
    }
  })
</script>

绑定内联(liline)样式(style)

对象语法

• v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}" 内嵌写法
• v-bind:style="styleObject" 对象写在js里
• 也可以结合返回对象的计算属性使用。

<div id="app">
  <!-- <div style="color: red; font-size: 30px;"></div> -->
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>

  <!-- 将对象写在JS里 -->
  <div v-bind:style="styleObject"></div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        fontSize: '30px'
      }
    }
  })
</script>

数组语法

将多个样式对象应用到同一个元素上

<div id="app">
  <!-- <div style="color: red; font-size: 14px;"></div> -->
  <div v-bind:style="[baseStyles, overridingStyles]"></div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      baseStyles: {
        color: 'red',
        fontSize: '30px'
      },
      overridingStyles: {
        fontSize: '14px',
      }
    }
  })
</script>

自动添加浏览器厂商前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

只会渲染数组中最后一个被浏览器支持的值。

<!-- <div style="display: flex;"></div> --> 
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>