vue $refs操作DOM
2024-08-21 20:48:43
原文链接：https://www.cnblogs.com/xumqfaith/p/7743387.html
如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，
console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">
这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。
ref和v-for在一起的情况
li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，
此时的$refs
整个用下来就是比较方便取DOM，方便操作DOM
最新文章
- 为什么局域网IP是192.168开头？
- 剑指Offer 左旋转字符串
- winform 在指定目录下已经生成资源Image图片的方式
- Playing with cubes II
- [原]C++程序示例：涉及到抽象类、继承…
- java面向对象之 多态 Polymorphism
- 一周学会Mootools 1.4中文教程:(5)Ajax
- 精华【分布式、微服务、云架构、dubbo+zookeeper+springmvc+mybatis+shiro+redis】分布式大型互联网企业架构！
- （转）WebSphere MQ基础命令
- 用Mirror，搞定用户画像
- PV 动态供给 - 每天5分钟玩转 Docker 容器技术（153）
- Dynamics CRM2013 附件禁用方案
- 基于nginx搭建yum源服务器
- ubuntu系统的teamviewer的安装及使用
- 关于Python pandas模块输出每行中间省略号问题
- 网络抓包教程之tcpdump
- php无限极分类方法
- C++面试笔记(3)
- Jenkins系列之一——初识
- Expo大作战(四十)--expo sdk api之 Calendar,Constants