Vue - 指令 - （v-bind）

v-bind

两种方式绑定：

1.绑定属性

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

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

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

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是放在""（双引号）下面的。

---

经验：

  // 如果bool为true，那么`class=burst`，否则是`class=''`