vue中$refs的用法及作用详解
更新时间：2018年04月24日 11:09:59 作者：Nosaj
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
用法如下:
HTML:
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div>
JS:
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
下面给大家介绍下vue $refs的基本用法，具体代码如下所示：
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
总结
以上所述是小编给大家介绍的vue中$refs的用法及作用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会
及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
生活中常用的几种坐标有：WGS-84、GCJ-02与BD-09。本文将利用Vue实现高德坐标转GPS坐标功能，即实现GCJ-02坐标转换成WGS-84坐标，需要的可以参考一下2022-04-04
本文主要介绍了解决vuex 数据丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决
在项目中使用elementui确实是很方便的一件事,下面这篇文章主要给大家介绍了关于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决的相关资料,需要的朋友可以参考下2023-02-02
最近开发遇到一个问题,修改对象某一个索引对象时,直接将对象赋值给数组的某一索引对象,该数组没变化,在 Vue 中,直接修改对象数组中某个对象的属性值时,数组的引用本身未改变,本文介绍了详细的原理分析和解决方案,需要的朋友可以参考下2025-03-03
项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配,下面这篇文章主要给大家介绍了关于如何在vue3项目中使用新版高德地图的完整步骤,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue 使用 canvas 实现手写电子签名功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Vue如何由本地js中存放的url地址获取图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家介绍了Vue3使用setup监听props实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢,下面这篇文章主要给大家介绍了关于一个vue组件库发布到npm的相关资料,需要的朋友可以参考下2022-03-03
最新评论