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 表达式。

目录
打赏
0
0
0
0
55
分享
相关文章
BayesFlow:基于神经网络的摊销贝叶斯推断框架
BayesFlow 是一个基于 Python 的开源框架,利用摊销神经网络加速贝叶斯推断,解决传统方法计算复杂度高的问题。它通过训练神经网络学习从数据到参数的映射,实现毫秒级实时推断。核心组件包括摘要网络、后验网络和似然网络,支持摊销后验估计、模型比较及错误检测等功能。适用于流行病学、神经科学、地震学等领域,为仿真驱动的科研与工程提供高效解决方案。其模块化设计兼顾易用性与灵活性,推动贝叶斯推断从理论走向实践。
97 7
BayesFlow:基于神经网络的摊销贝叶斯推断框架
路径规划最全综述+代码+可视化绘图(Dijkstra算法+A*算法+RRT算法等)-1
路径规划最全综述+代码+可视化绘图(Dijkstra算法+A*算法+RRT算法等)-1
快速集成阿里云资源到企业CMDB-配置审计
配置审计提供跨云产品、跨地域、跨账号的资源集成能力,可以帮助企业快速将阿里云资源集成到企业自建的CMDB中。
1140 0
快速集成阿里云资源到企业CMDB-配置审计
【Vue3】我用Vue3 + Ts + Pinia + Vant 完成了一个企微H5应用!
公司想做一个内部的企微H5应用,给代理人或者销售们用,主要用途有两点: 在后台维护一整套素材(图片、文章、文本、视频、语言、小程序等),可以在H5中选择素材并群发给客户、客户群、朋友圈
1127 0
ZYNQ-基于BRAM的PS和PL数据交互
ZYNQ-基于BRAM的PS和PL数据交互
1117 0
ZYNQ-基于BRAM的PS和PL数据交互
【超详细】如何使用TypeScript和GraphQL开发应用
GraphQL是一个专为构建灵活的API而生的强大的查询语言。它允许您为数据定义类型系统,因此在执行查询时,它仅返回所需的数据。
594 0
【超详细】如何使用TypeScript和GraphQL开发应用
面对疾风吧,如何搭建高协同的精准告警体系?
想要实现AiOps,智能告警少不了。Arms 告警运维中心让面向告警的组织协同更加便捷高效!
面对疾风吧,如何搭建高协同的精准告警体系?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等