有时除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
- 比如动态绑定a元素的href属性。
- 动态绑定img元素的src属性。
这个时候，我们可以使用v-bind指令：
- 作用：动态绑定
- 缩写： :
1.动态绑定src和href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div>
<img src="https://i0.hdslb.com/bfs/sycp/creative_img/202004/ac1d8d1717d1b762eae3fd1d7c806c20.jpg" alt="">
</div>
<!--要动态的设置图片的地址url使用v-bind指令来实现,href也行-->
<div id="app">
<img v-bind:src="imgURL" alt="">
<img :src="imgURL" alt="">
<a href="https://www.bilibili.com/">23333</a>
<a v-bind:href="aHref">23333</a>
<a :href="aHref">23333</a>
</div>
<!--
v-bind语法糖的写法
v-bind:src 可简写成 :src
v-bind:href 可简写为 :href
-->
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！',
imgURL:'https://i0.hdslb.com/bfs/sycp/creative_img/202004/ac1d8d1717d1b762eae3fd1d7c806c20.jpg',
aHref:'https://www.bilibili.com/'
}
});
</script>
</body>
</html>2.v-bind绑定class
1.对象语法
语法：以一个标签举例，
{{message}}
。可以通过这样的方式来绑定class属性，若对应类名的布尔值为true，则就添加这个类名，反之则去除，同时你用了这种动态绑定的方式绑定的类名，你也可以用最原始的方式来再添加类名，然后这些类名会合并赋予给标签。
另外如果用动态绑定方式觉得类名太长的还可以定义一个方法来返回类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
.line{
font-size: 50px;
}
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<h2 class="active">{{message}}</h2>
<h2 class="title" v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<!--通过方法来实现动态绑定的-->
<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<button @click="btnClick">切换</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！',
isActive:true,
isLine:true
},
methods: {
btnClick:function(){
this.isActive=!this.isActive;
this.isLine=!this.isLine;
},
getClasses:function(){
return {active: this.isActive,line: this.isLine}
}
},
});
</script>
</body>
</html>2.数组语法（不常用）
数组语法的含义是:class后面跟的是一个数组。
<script src="../js/vue.js"></script>
<div id="app">
<h2 :class="['active','line']">{{message}}</h2>
<!--如果不加引号就会被当成变量解析-->
<h2 :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！',
active:'aaa',
line:'bbb'
},
methods: {
getClasses:function(){
return [this.active,this.line];
}
},
});
</script>3.v-bind绑定style
可以利用v-bind:style来绑定一些CSS内联样式。
1.对象语法
写法： :style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型。
对象的key是CSS属性名称，对象的value是具体赋的值，值可以来自于data中的属性。
当然，也可以添加一个方法。
<script src="../js/vue.js"></script>
<div id="app">
<!-- <h2 :style="{属性名:属性值}">{{message}}</h2> -->
<!--这里的50px本质上是不加单引号，但是不加的话vue会把它当成变量解析，所以要加个单引号-->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:finalSize}">{{message}}</h2>
<h2 :style="{fontSize:finalSize1+'px',color:finalColor}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！',
finalSize:'100px',
finalSize1:100,
finalColor:'red'
},
methods: {
getStyle:function(){
return {fontSize:this.finalSize1+'px',color:this.finalColor}
}
}
});
</script>2.数组语法（不常使用）
写法：
style后面跟的是一个数组类型。
<script src="../js/vue.js"></script>
<div id="app">
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！',
baseStyle:{backgroundColor:'red'},
baseStyle1:{fontSize:'100px'}
//就是单独把一个对象当成数组每一个数组对象，但是这个方法用的少
}
});
</script>
````