vue中$refs的用法及作用详解
2024-09-01 22:43:47
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值。
但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行。
在JavaScript里面通过this.$refs.input1去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗。
HTML
<div id="app">
<input type="text" ref="input1" />
<button @click="add">添加</button>
</div>
JavaScript
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
}
}
})
这里的$refs可以看做是ref的选择器,这个$ref是一个对象,通过key可以获取到其中存放的对象。
当然了,既然是对象,也可以使用方括号运算符去访问,具体是this.$refs[input1]。
"我只是怕我再也见不到你了。"
最新文章
- thinkphp怎么设置输入网址直接进入首页
- UIView--震动效果
- Node.js开发环境搭建
- POJ 1273 Drainage Ditches -dinic
- Centos7下卸载docker
- ACM Computer Factory
- hdu 4883 思维题
- gem install 出现Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://ruby.taobao.org
- SpringMVC(三) —— 参数绑定和数据回显
- 间隔DP基础 POJ2955——Brackets
- --@ui-router--登录页通过路由跳转到内页的demo
- How To Use ggplot in ggplot2?
- Akka(2):Actor生命周期管理 - 监控和监视
- pig加载两个不同字段个数的文件?load file with different items(f1有42列,f2有43列读到一个对象中)
- ZooKeeper的使用---Java程序
- Object Pooling(对象池)实现
- Linux 下 ftp的使用
- FFmpeg4.0笔记:rtsp2rtmp
- Ubuntu下Ruby的下载和编译源码安装
- JS冒泡排序的6种写法(武当雄风)