首页 > 其他分享 >v-bind的使用

v-bind的使用

时间:2024-04-14 11:44:19浏览次数:18  
标签:元素 自定义 bind 修饰符 使用 data 属性

v-bind是为html元素绑定属性

缩写:

 

html的元素可以有原生属性和自定义属性,每个dom元素的原生属性可以自己上网查找

v-bind的三个修饰符的作用:

 在下面的代码中,使用了ref声明了dom元素的名称,id为该div元素的原生属性,data是使用了v-bind简写的方式,在divDom上声明了data的自定义属性

 运行结果为:

 可以看到在钩子函数中打印出的结果为undefined,自定义属性是无法在钩子函数中使用的

 当我们添加了prop修饰符后,运行结果为:

 控制台成功打印了自定义的data属性的值

prop修饰符的作用:自定义属性转为原生属性

在下面的代码中,打印了divDom元素

 控制台输出为:

 

在divDom的attributes属性中展示了该dom元素的所有属性,

所以, 当我们追加我们的data自定义属性的修饰符attr,并添加我们在钩子函数中写成attributes中的data时,

 

 控制台输出为:

 可以成功打印出data的值

.camel修饰符:- 将短横线命名的 attribute 转变为驼峰式命名。不做举例说明

v-bind还可以用来组件之间的传值,后续组件学习再记录

 

标签:元素,自定义,bind,修饰符,使用,data,属性
From: https://www.cnblogs.com/123-hh/p/18133931

相关文章

  • Windows 程序包管理器 Chocolatey 的使用
    Windows程序包管理器Chocolatey的使用Chocolatey是一个Windows平台上的软件包管理工具,类似于Linux上的apt、yum或者macOS上的Homebrew。它允许用户通过命令行快速安装、更新和卸载软件包。Chocolatey官网Chocolatey的安装、更新和卸载1.安装Chocolateycmd......
  • 使用java client连接ES7.17.20时报错:Caused by: java.lang.NoClassDefFoundError: Cou
    1.报错详情Causedby:java.lang.NoClassDefFoundError:Couldnotinitializeclasscom.fasterxml.jackson.databind.cfg.DatatypeFeatures$DefaultHolder atcom.fasterxml.jackson.databind.cfg.DatatypeFeatures.defaultFeatures(DatatypeFeatures.java:33)~[jackson-data......
  • 小小逻辑判断符的错误使用,资损几万块
    分享是最有效的学习方式。博客:https://blog.ktdaddy.com/故事这是一个真实事件,三年前老猫负责公司的支付资产业务。为了响应上级号召,加强国央企之间的合作,公司新谈了一个支付对接的渠道(当然这个支付渠道其实很冷门的,也是为了对接而对接,具体哪个渠道也不方便透露),由于原始支付......
  • 通达信条件预警使用教程(引用选股公式盘中实时监控)
    步骤汇总:第1步:设置预警范围第2步:设置选股公式(预警公式)第3步:运行效果以下是详细步骤:第一步:设置预警范围 单击通达信右下角条件预警图标,单击设置,设置已有公式,过程如下:  注意事项:预警对电脑配置要求高,低配置的电脑不宜监控太多目标,建议只监控备选,此处我选择的是我之前......
  • Misans global字体在vue中如何使用
    一、字体下载字体官网链接:https://hyperos.mi.com/font/zh/download/下载之后如下所示:解压之后如下所示:我们只需要提取其中一部分文件即可其中MiSans目录下只需要MiSansVF.tff文件_MACOSX目录下需要二、使用步骤1、将Misansglobal字体文件添加到项目中。可以将字体......
  • split(),slice(),splice(),join()使用方法
    比如一个例子:有一个字符串:pdf,jpg,png,jpge,doc,docx,xls,xlsx,ppt,pptx,rar,zip把它修改成以逗号连接的扩展名字符串,方法如下:varaccept="pdf,jpg,png,jpge,doc,docx,xls,xlsx,ppt,pptx,rar,zip";varnewStr="."+accept.toLowerCase().split(",").join(",.")......
  • 在Linux中,如何使用脚本进行系统配置和部署?
    在Linux中,使用脚本进行系统配置和部署是一种自动化和标准化环境设置的有效方法。脚本可以简化复杂的安装和配置过程,确保在多个系统或环境中的一致性。以下是使用脚本进行系统配置和部署的一般步骤:1.规划和设计在编写脚本之前,规划你需要执行的任务和步骤。确定脚本需要完成的功......
  • 在Linux中,如何使用LVM管理逻辑卷?
    在Linux中,逻辑卷管理(LVM)是一种灵活的磁盘管理方法,它允许你创建、调整和移动逻辑卷,而无需中断服务。LVM提供了对物理存储资源的抽象层,使得管理大型存储解决方案变得更加容易。以下是使用LVM管理逻辑卷的基本步骤:1.安装LVM工具首先,确保你的系统已经安装了LVM工具,包括lvm2和device......
  • vscode使用gdb插件调试二进制文件
    使用vscode访问虚拟机里面的代码。代码是在虚拟机的xshell编译的(必须的debug模式)。现在可以通过在vscode下面安装gdb插件。然后就可以在vscode下面使用gdb来启动这个二进制文件了,还可以在vscode里面,在函数上面打断点。 在vscode左侧栏,点击debug,可以创建launch.json文件。......
  • Gstreamer 使用
    Gstreamer安装安装依赖包$sudoapt-getinstallgtk-doc-toolslibgstreamer1.0-0gstreamer1.0-plugins-basegstreamer1.0-plugins-goodgstreamer1.0-plugins-badgstreamer1.0-plugins-uglygstreamer1.0-libavgstreamer1.0-docgstreamer1.0-toolsgstreamer1.0-xgstrea......