vue-learning：6-template-v-bind

绑定元素特性的指令v-bind

回顾下，从HTML元素的结构看，在VUE框架中，内容由插值{{ }}和v-html绑定；v-if和v-show可以控制元素的可见性；v-for可以用于批量生成列表元素。

这一节介绍下绑定元素特性的指令v-bind的用法：

v-bind:attribute = value
v-bind:attribute = expression

// v-bind 简写 ：
:attribute = value
:attribute = expression

点击查看DEMO v-bind on attribute

<div id="app">
    <button v-bind:disabled = "disabledForBtn">click me</button>
</div>

new Vue({
    el: "#app",
    data: {
        disabledForBtn: true
    }
})

这个例子当disabledForBtn为真值时，按钮被禁用，即disabled特性生效。其中disabled称为指令v-bind的参数，而=后面的值其它指令一样，可以是具体的布尔值类型值，也可以表达式试算的结果值。

<div id="app">
    <input v-bind:disabled = "new Date().getHours() > 12" />
</div>

但通常不建议将复杂计算写在tempalte模板中，可以使用后面要讲到的计算属性来表达，使代码更为简洁。

<div id="app">
    <input v-bind:disabled = "isCanUseInput" />
</div>

new Vue({
    el: "#app",
    data: {
        canUseBtn: true
    },
    computed: {
       isCanUseInput: () => new Date().getHours() > 12
    }
})

当在页面中有大写特性绑定，需要反复书写v-bind相当重复工作，所以Vue提供了简写方式：用冒号:代替v-bind。

<button :disabled = "disabledForBtn">click me</button>
<input  :disabled = "new Date().getHours() > 12" />
<input  :disabled = "isCanUseInput" />

无论选择用v-bind还是简写冒号的形式，建议在页面中都尽量保持一致性。

HTML元素中有两个特殊的特性，class和styel，下一节具体讲解。