Vue 2.0学习笔记：v-bind

经过前面的学习，我们知道v-on可以实现事件绑定，v-model可以实现双向数据绑定。在Vue中除了这两个指令，还有一个v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。简单说，v-bind是用来绑定HTML属性。

JavaScript给HTML标签指定属性

HTML不同的标签具有不同的属性。我们在写标签的时候一般会根据不同的标签指定不同的属性，比如img标签，我们会指定src和alt属性。

<img src="../images/logo.png" alt="w3cplus" />

但我们很多时候需要动态的给HTML标签动态指定属性的值。比如，我们这个img的src和alt是动态数据data（也就是服务端传过来的）。我们需要借助JavaScript来实现。在JavaScript中，我们有三个方法用来控制元素的属性：

Element.getAttribute()：获取元素上一个指定的属性值。如果指定的属性不存在，则返回null或""（空字符串）
Element.setAttribute()：指定元素上的一个属性值。如果属性已经存在，则更新该值；否则将添加一个新的属性用指定的名称和值
Element.removeAttribute()：从指定的元素中删除一个属性

同样拿img标签的src和alt来举例。比如我们有一个默认的图片元素：

 1 <div class="wrapper">
 2     <img src="//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg" alt="美女与野獸">
 3 </div>
 4 <div class="action">
 5     <button id="btn">美女与野獸</button>
 6 </div>
 7 
 8 // JavaScript
 9 let data = {
10     imgInfo: {
11         imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/yuesou.jpg',
12         alt: '野獸'
13     }
14 }
15 
16 const imgEle = document.querySelector('.figure')
17 const btn = document.getElementById('btn')
18 
19 btn.addEventListener('click', () => {
20     imgEle.setAttribute('src', data.imgInfo.imgUrl)
21     imgEle.setAttribute('alt', data.imgInfo.alt)  
22 }, false)

View Code