【vue.js开发】基础篇：v-bind指令

vue.js开发中，v-bind指令一般是用来绑定class和style的，首先说一下绑定class的方法：

对象语法
顾名思义，就是传给class的是一个对象，例如（例1）：

<div id="app">
  <p class="font_Size" v-bind:class="{ red: isRed }">Hello World!</p>
</div>

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

例1里面的red就是要绑定的class，isRed的值决定了是否要绑定class，并且v-bind绑定的class也不会覆盖元素上已经存在的font_Size类。我们可以看到data里面的isRed设成了true，所以最后渲染出来会是这样：


当然，我们也可以在对象中传多个属性，动态绑定多个class，例如（例2）：

<div id="app">