4.1 了解v-bind指令

在第2章时，我们已经介绍了指令v-bind的基本用法以及它的语法糖，它的主要用法是动态更新HTML元素上的属性，回顾一下下面的示例：

        <div id="app">
            <a v-bind:href="url">链接</a>
            <img v-bind:src="imgUrl">
            <! -- 缩写为-->
            <a :href="url">链接</a>
            <img :src="imgUrl">
        </div>
        <script>
            var app = new Vue({
              el: '#app',
              data: {
                  url: 'https://www.github.com',
                  imgUrl: 'http://xxx.xxx.xx/img.png'
              }
            })
        </script>

链接的href属性和图片的src属性都被动态设置了，当数据变化时，就会重新渲染。

在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。