Vue指令之v-bind的三种用法
目录：
一、直接使用指令v-bind
二、拼接表达式
三、使用简化指令“:”
一、直接使用指令 v-bind
v-bind: 是Vue中，提供的用于绑定属性的指令。
实例：
继续上一章节在HTML文件：02.v-cloak的学习.html中编辑：
将msg2修改：
msg2: `<h1>哈哈 ，我是一个大大的H1，我大，我骄做</h1>`，
mytitle:`这是一个自己定义的title`
设置：<input type= "button" value= "按钮” title="123">
程序段为：
……
<div v-html="msg2 ">1212112< /div>
<input type= "button" value="按钮" title="123">
</div>
<script src="。/1ib/vue-2.4.0. js"></ script>
<script>
var vm = new Vue({
el: '#app' ,
data: {
msg: '123' ,
msg2: '<h1>哈哈 ,我是一个大大的H1， 我大，我骄傲</h1>',
mytitle:'这是一个自己定义的title'
}
})
……
这时刷新浏览器显示结果看到一个 按钮 ，用鼠标指针放上去显示一个下标123 。
现在需要将mytitle的值显示上去，如果直接将 title="123"换为title="mytitle"，指针放在按钮上显示的仍然只是mytitle几个字符。这里mytitle是date{}的一个属性，需要告诉title，mytitle是一个变量。给属性做属性绑定就需要用 v-bind 指令。
<input type= "button" value= "按钮”v-bind: title="myti tle">
刷新后，指针放在按钮上显示的就是mytitle的值：这是一个自己定义的title。
二、拼接表达式
在绑定的时候，拼接绑定内容“:title="btnTitle + `，这是追加的内容`"
v-bind 会把title=""的内容当做JS代码去执行。会把""里的内容作为一个表达式的内容。一个变量加上一个字符串，属于合法表达式
那么上程序段改为：
<input type= "button" value= "按钮”v-bind: title="myti tle+`123`">
也是可以解析的。
这里mytitle就是一个变量加上表达式123。
刷新浏览器，鼠标指针移到按钮上显示为：这是一个自己定义的title123
三、使用简化指令“:”
给属性做数据绑定除了可以用 v-bind 指令外，还可以用简化指令“:”。
<input type= "button" value= "按钮” : title="myti tle+`123`">
刷新结果和上边一样。
注意: v-bind: 指令可以被简写为:要绑定的属性
在v-bind 中,可以写合法的JS表达式。
