九、Vue指令v-bind属性绑定的基础使用与绑定class样式的使用
v-bind主要用于为html绑定属性。
开发的过程中，有时候html的属性并不是写死了，而要动态显示，使用属性动态绑定就可以轻松实现。
v-bind基础使用
为a标签绑定url与title属性。
<!DOCTYPE html>
<html>
<head>
<title>v-bind</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a :href="url" v-bind:title="title">自如初</a>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
url:"https://www.ziruchu.com",
title:'个人博客'
}
})
</script>
</body>
</html>
上述案例
1）为a标签动态绑定了一个href属性与title属性，只要Vue的data中url发生改变，那么跳转也就发生改变；
2）案例中分别使用了:与v-bind：不同的写法，：是语法糖形式，开发中也是常用的；
3）为了节约篇幅，后续案例中省略html部分
v-bind绑定class属性--对象方式（推荐）
使用对象绑定格式时，其写法为 {类名:true|false}
<style>
.pink {
color: pink;
}
.yellow {
color: yellow;
}
</style>
<div id="app">
<h1 v-bind:class="{pink:isPink,yellow:isYellow}">{{ content }}</h1>
<button @click="changeColor">换色</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
content:'自如初博客，一个记录学习的博客',
isPink:true,
isYellow:true
},
methods:{
changeColor(){
this.isPink = !this.isPink;
this.isYellow = !this.isYellow
}
}
});
</script>
上述案例
1）使用绑定样式实现修改文本颜色，上述案例分为两步走，先忽略按钮，体验为元素绑定样式后再看按钮；
2）h1元素中绑定了2个样式，最终只有颜色是yellow，因为pink被层叠了；
3）可以看到为元素绑定样式时使用了{}，以对象的方式为元素绑定样式；
4）为元素绑定样式之后，需要先准备好一个同名样式，如pink，当isPink值为true，那么该就显示
5）按钮实现换色，当点击按钮时，触发对应的事件，事件中修改数据值
v-bind绑定class属性--数组方式
使用数组绑定格式时，其写法为 ['类名1','类名2']、{'类名1','类名2',{类名3:true|false}}这两种写法都可以，注意了，数组写法时，类名一定要加引号。
<style>
.pink {
color: pink;
}
.yellow {
color: yellow;
}
</style>
<div id="app">
<h1 :class="['pink','yellow']">一个PHP博客</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
}
});
</script>
数组方式与对象方式有什么区别？
上述案例直接出现黄色文字，通过与对象的对比，我们可以发现，使用数组方式时，绑定类名后，只要为其书写的样式代码，那么就会立即生效；对象方式则有点不同，若值为false，则不会为元素增加样式。
v-bind绑定class属性--style方式
:style使用的是对象语法，可以直接写元素上，也可以在vue中为其绑定数据。
<div id="app">
<div :style="{color:'blue',fontSize:fontSize}">自如初</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
fontSize:'18px'
}
});
</script>
关于v-bind绑定样式就记录到这里了。