Vue2学习计划四：v-bind
我们上一节讲了插值，主要是针对DOM的文本节点操作。那么如果现在有个需求，我们需要点击按钮，更换图片，怎么办？或者我们需要更换一下元素的样式该怎么实现呢？
Vue当然有办法，这就是v-bind的功效了。主要用于动态绑定属性。可以用冒号来缩写。
一、v-bind基本使用（动态绑定链接地址）
我们这里主要讲一下怎么使用v-bind和v-bind的语法糖，实现了数据动态绑定超链接a元素的href和图片的src属性。以后只需要修改Vue实例里的数据就可以更换图片和链接地址。
<div id="app">
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="baiduUrl">百度一下你就知道</a>
<hr>
<h2>语法糖v-bind</h2>
<img :src="imgUrl" alt="">
<a :href="baiduUrl">语法糖实现转跳百度</a>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: 'https://cn.vuejs.org/images/logo.svg',
baiduUrl: 'https://www.baidu.com'
}
})
</script>其实使用v-bind用于修改图片或者超链接地址，最省事就是在属性名之前加上:(冒号)，或者写全了就是加上v-bind:
实现截图：
二、v-bind动态绑定class
class属性一般又叫做类名，用于指向特定的样式。还可以用于区别相同名字的元素。在Vue里面动态绑定class有两种方式，一种是对象语法绑定，另一种是数组语法绑定。
2.1 对象语法
这里对象指{key1: value, key2: value2}或{key1: true, key2: false}等。所谓对象语法，就是v-bind动态绑定class属性时，属性值使用对象的方法实现。综合起来就是v-bind:class="{key1: value1, key2: value2}"这样实现。
接下来我们实现一个使用class属性控制h2元素里的文字颜色的例子，初始用class控制样式显示文字为绿色，点击按钮之后控制class属性编程红色。
<style>
.active {
color: red;
}
.line {
color: green;
}
</style>
<div id="app">
<h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<button v-on:click="changeColor">改变颜色</button>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '谢谢赏脸。。。',
isActive: false,
isLine: true
},
methods: {
changeColor(){
this.isActive = !this.isActive;
this.isLine = !this.isLine
}
}
})
</script>实现截图：
这个对象实现class的动态绑定，也是最常用的方法，有以下需要注意：
2.2 v-bind动态绑定class（数组语法）
这种方法用得较少，实质上就是class的属性值用[]实现。
在这里要着重讲一下，属性值是用引号括起来的这里为了表述清除，直接指代双引号，就是属性值是用双引号括起来的。**然后属性值内部如果有单引号括着就是字符串，没有单引号的字符就是变量。**比如:class="[‘active’, line]"里面的active就是字符串，line就是变量。
接下来用代码实现了数组语法，并且使用方法返回class属性值
<style>
.active {
color: red;
}
.line {
color: green;
}
</style>
<div id="app">
<h2 v-bind:class="['active']">{{message}}</h2>
<h2 :class="changeColor()">使用方法返回class属性</h2>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '谢谢赏脸。。。',
},
methods: {
changeColor(){
return "line"
}
}
})
</script>实现截图：
三、v-bind动态绑定style
一般我这种菜鸡都使用style给元素添加属性，比如要改个字体颜色啊，换个大号的字啊。都是使用style完成的。如果只改一个样式还好，当需要同时改变字体大小，字体颜色，就会比较麻烦了。所以动态绑定style同样都有二种方式跟前面class一样。
3.1 对象语法绑定style
这里使用v-bind:style来绑定一些CSS内联样式时需要注意：
- 使用驼峰式:fontSize
- 使用短横线分割(不能忘记单引号):‘font-size’
- 属性值要使加单引号，不然Vue会按照变量进行解析
接下来用代码实现一下使用v-bind:style绑定字体颜色的实例
<div id="app">
<h2>{{message}}</h2>
<h2 v-bind:style="{fontSize: '30px'}">30px使用驼峰：{{message}}</h2>
<h2 :style="{'font-size': '30px'}">30px使用短横线： {{message}}</h2>
<h2 :style="{fontSize: '40px', color: finalColor}">字体大小和颜色：{{message}}</h2>
<h2 :style="getStyle()"></h2>
<h2 :style="getStyle()">函数返回样式: {{message}}</h2>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '欢迎指正批评',
finalColor: 'red'
},
methods: {
getStyle: function(){
return {fontSize: '40px', color: 'green'};
}
}
})
</script>实现截图：
3.2 数组形式动态绑定style
这种用法很少用，用起来比较麻烦，直接举例，了解一下即可。
<div id="app">
<h2>{{message}}</h2>
<h2 v-bind:style="[style1, style2, style3]">{{message}}</h2>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello vue",
style1: {fontSize: '30px'},
style2: {color: 'red'},
style3: {textDecoration:'underline'}
}
})
</script>以上就是v-bind常用的用法了。