v-bind 及 class 与 style 绑定

class的绑定

对象语法

<div id="app">
  <div :class="{'active':isActive,'open':isOpen}"></div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        isActive:true
      }
    })
</script>

数组语法

<div id="app">
  <div :class="[active,open]"></div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        active: 'active',
        open: 'open'
      }
    })
</script>

数组语法中可以使用对象语法

<div id="app">
  <div :class="[{ 'active' : isActive},open]"></div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        isActive: true,
        open: 'open'
      }
    })
</script>

style的绑定

• 绑定内联样式与绑定class的方法类似，都有对象语法和数组语法，书写对象语法跟在元素上直接写css相似。
• 在实际业务中，:style的数组语法并不常用，同时较为常用的应当是计算属性。
• vue.js很智能，它会帮我们自动给特殊的 CSS 属性名称增加前缀，比如 transform。