Vue - 指令 - （v-bind）

v-bind

两种方式绑定：

1.绑定属性

<div id="box">
  <input v-model="parentMsg">
  <child v-bind:my-message="parentMsg"></child>
</div>

Vue.component('child', {
  // 声明 props
  props: ['myMessage'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ myMessage }}</span>'
})

var vm = new Vue({
  el: '#box',
  data: {
    parentMsg: ""
  }
})

可以绑定属性意味着也能绑定style属性：

<div v-bind:style="{width: helth + '%'}">

2.绑定一个对象的所有属性
注意：与v-model类似了，v-model="msg"，直接就是等于。
而不是前面的v-bind: msg="variable"。

---

v-bind绑定class可以绑定一个数组：

v-bind:class="['header', 'test']"    // 注意，这里是放在双引号下面的。

三元运算符：

v-bind:class="['header',  todo.completed ? 'complated' : ' ']"

如果完成了，那么就传入complated这个类，如果没有就不传递。注意，todo.completed是放在""（双引号）下面的。

---

经验：

<div v-bind:class="{ burst:bool }"></div>  // 如果bool为true，那么`class=burst`，否则是`class=''`