v-bind 指令的学习 | 学习笔记

简介: 快速学习 v-bind 指令的学习

发者学堂课程【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 。

1666935308660.jpg

现在需要将 mytitle 的值显示上去,如果直接将 title="123"换为 title="mytitle",指针放在按钮上显示的仍然只是 mytitle 几个字符。这里 mytitle 是 date{} 的一个属性,需要告诉 title,mytitle 是一个变量。给属性做属性绑定就需要用 v-bind 指令。

<input type= "button" value= "按钮”v-bind: title="myti tle">

刷新后,指针放在按钮上显示的就是 mytitle 的值:这是一个自己定义的 title

1666935292308.jpg


二、拼接表达式

在绑定的时候,拼接绑定内容“ :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 表达式。

相关文章
|
存储 Shell 开发者
E906的指令|学习笔记
快速学习 E906的指令
547 0
|
7月前
|
JavaScript
Vue中的v-bind指令的用法有哪些?
Vue中的v-bind指令的用法有哪些?
185 37
|
7月前
|
前端开发 开发者
在使用`v-bind`指令时,有哪些注意事项?
在使用`v-bind`指令时,有哪些注意事项?
44 0
|
7月前
|
JavaScript
VUE指令: 请解释v-bind指令的作用。
VUE指令: 请解释v-bind指令的作用。
79 1
|
JavaScript 前端开发
Vue2基本指令的学习 v-bind
从基础到实战,我们一环都不要少!
286 0
普通函数中的this指向问题解决方案bind
普通函数中的this指向问题解决方案bind
44 0
NgModel指令学习笔记
NgModel指令学习笔记
164 0
NgModel指令学习笔记
|
Apache
一个很有用的apache指令SetEnvIf
SetEnv 指令 说明 设置环境变量 语法 SetEnv env-variable value   SetEnvIf 指令 说明 根据客户端请求属性设置环境变量 ...
2312 0
每日一题:bind、call、apply 区别?如何实现一个bind?
每日一题:bind、call、apply 区别?如何实现一个bind?
104 0
|
JavaScript
Vue指令之v-bind的三种用法
一、直接使用指令v-bind 二、拼接表达式 三、使用简化指令“:”
Vue指令之v-bind的三种用法