vue.js中ref和$refs的使用及示例讲解
作者:有梦想的咸鱼前端 发布时间:2024-04-28 09:24:59
标签:vue.js,ref,$refs
关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的:
ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件;
vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的;类似于jquey中的$(".xxx");
那么我们如何使用ref和$refs呢?
ref可以直接加在HTML标签上,作为一个属性存在于HTML标签中,如图
<input title="手机号" name="mobile" ref="mobile" placeholder="手机号" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>
这样,我们就是给input输入框元素注册了引用信息,那么我们如何获取这个DOM元素呢?
同样,vue.js也给我们提供了特定的方法:
this.$refs.mobile
上面图片就是我们this.$refs.mobile
的输出结果 ,vue.js提供的获取DOM元素的方法确实还是很方便呢
来源:https://www.cnblogs.com/dengyao-blogs/p/11350292.html
0
投稿
猜你喜欢
- getDatagetData方法主要是获取方法的元数据metadata。getData实现上借助metaMap和noop两个内部方法。met
- 问题背景调试脚本时,遇到一个问题:ImportError: cannot import name 'A' from '
- 在python开发中,经常会出现调用子文件夹下的py模块如上图,如果在test.py文件中,要调用meeting文件夹下面的huodongs
- 这里针对smtplib做了一系列封装,可以完成以下四种场景:发送纯文本的邮件发送html页面的邮件发送带附件文件的邮件发送能展示图片的邮件以
- 前几天,使用python时遇到这么一个需求,删除一个列表中值为1的元素。我寻思着使用remove方法,但是remove方法只会删除第一个,于
- 本文主要介绍使用Python调用ADB命令实现实时监控logcat关键字的功能采用多进程,可同时监控多个设备,监控多个关键字。需要配置ADB
- 最近去公司,连续几天被保安查健康码,觉得他们效率有点慢,排了长队,回到家就来兴致,写了个简易的健康码识别系统(主要是针对上海的健康码 随申码
- 本文为大家分享了opencv基于Haar人脸检测和眼睛检测的具体代码,供大家参考,具体内容如下在这里,我们将进行人脸检测。最初,该算法需要大
- 自动化测试的脚本运行完成之后,可以生成test report,如果能将result自动的发到邮箱就不用每次打开阅读,而且随着脚本的不段运行,
- 本文实例为大家分享了mysql备份脚本,供大家参考,具体内容如下#!/bin/bash#全备方式,一般在从机上执行,适用于小中型mysql数
- 一,十进制(decimal system)转换函数说明 1,十进制转二进制 decbin() 函数,如下实例 echo decbin(12)
- 楔子由于之前电脑上安装的MySQL版本是比较老的了,大概是5.1的版本,不支持JSON字段功能。而最新开发部门开发的的编辑器产品,使用到了J
- 问题最近在研究图学习,在用networkx库绘图的时候发现问题。'''author:zhengtime:2020.1
- 以下函数列出某个目录下(包括子目录)所有文件,本随笔重点不在于递归函数的实现,这是一个很简单的递归,重点在于熟悉Python 库os以及os
- zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表。具体意思不好用文字来表述,直接看示例:1.示例1:x = [1
- CSRFCSRF全拼为Cross Site Request Forgery,译为跨站请求伪造。CSRF指攻击者盗用了你的身份,以你的名义发送
- 一,红绿灯揭示板案例思路1. 创建Traffic_light红绿灯类(1)静态属性 :<1> 绿灯时间,<2> 黄灯
- 本文代码需要正确安装Python扩展库pywin32,建议下载whl文件进行离线安装。然后调用win32api的ShellExecute()
- 管理认证系统最简单的方法是通过管理界面。然而,当你需要绝对的控制权的时候,有一些低层 API 需要深入专研,我们将在下面的章节中讨论它们。创
- 前言js是一门弱类型的语言,它的强制类型转换的迷惑性也被人诟病,例如标题提到的一个小例子,我想可能很难再找到其他的语言,允许我们觉到一个值似