开发者学堂课程【Vue.js 入门与实战:v-bind 指令的学习】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8130
v-bind 指令的学习
目录:
一、直接使用指令 v-bind
二、拼接表达式
三、使用简化指令“:”
一、直接使用指令 v-bind
v-bind: 是 Vue 中,提供的用于绑定属性的指令。
实例:
继续上一章节在 HTML 文件:02.v-cloak 的学习.html 中编辑:
将 msg2 修改:
msg2: `哈哈 ,我是一个大大的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 表达式。