vue中$refs的用法及作用详解

叁歲伎倆 2024-04-19 12:59 49阅读 0赞

一般来讲，获取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>

![format_png][]

![format_png 1][]

## 注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， ##

[http://ddrv.cn/a/212452][http_ddrv.cn_a_212452]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTYwOTU3OS8yMDE5MDUvMTYwOTU3OS0yMDE5MDUxNTExMTYyODEyNi00MTUxMTUwNDYucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTYwOTU3OS8yMDE5MDUvMTYwOTU3OS0yMDE5MDUxNTExMTgwNDEwNS04NzkzNDk3NTUucG5n?x-oss-process=image/format,png
[http_ddrv.cn_a_212452]: http://ddrv.cn/a/212452

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中$refs的用法及作用详解

般来讲，获取DOM元素，需`document.querySelector（".input1"）`获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，...

叁歲伎倆/ 2024年04月19日 12:59/ 0 赞/ 50 阅读

相关【Docker】企业中 Docker 的 Dockerfile 用法及作用详解

企业中 Docker 的 Dockerfile 用法及作用详解本文将详细介绍企业中 Docker 的 Dockerfile 用法及其在企业中的作用。通过使用 Java

本是古典何须时尚/ 2024年03月02日 08:05/ 0 赞/ 46 阅读

相关 vue中$refs的用法及作用详解

1. 一般来讲，获取DOM元素，需\\document.querySelector（".input1"）\\获取这个dom节点，然后在获取input1的值。 2. 但是用r

朱雀/ 2023年02月16日 12:26/ 0 赞/ 193 阅读

相关 vue中ref和$refs的介绍及使用

文章目录 Vue中ref和$refs的介绍及使用 ref介绍 this.$refs介绍实例（通过ref特性调用子组件的方法

╰+攻爆jí腚メ/ 2022年12月29日 01:36/ 0 赞/ 196 阅读

相关 react 中 ref 的作用

帮助我们在 react 里面直接获取 dom 元素使用的, 一般情况下尽量不用. 在做复杂业务比如动画, 不可避免要用到页面标签时, 可以用 ref. ref 和 se

向右看齐/ 2022年12月10日 03:41/ 0 赞/ 198 阅读

相关 vue ref的作用

一、示例  <p ref="p">hello</p>

小鱼儿/ 2022年11月15日 03:52/ 0 赞/ 156 阅读

相关 Adapter的作用及用法(四种适配器详解)

> 首先，我们常用的Adapter有四种，分别是BaseAdapter、SimpleAdapter、ArrayAdapter、SimpleCursorAdapter四种。

川长思鸟来/ 2022年06月04日 02:43/ 0 赞/ 220 阅读

相关 CSS中!important的用法及作用

定义及语法 !important，作用是提高指定样式规则的应用优先权（优先级）。语法格式\{ cssRule !important \}，即写在定义的最后面，例如：box

你的名字/ 2022年04月13日 11:58/ 0 赞/ 297 阅读

相关 Vue 中mixin 的用法详解

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。一.区别 1.mixin混入对象和Vuex的区别：　　　　Vuex是状态共享管理，所以

女爷i/ 2021年08月31日 11:34/ 0 赞/ 531 阅读

相关 !important的用法及作用

定义及语法 `!important`，作用是提高指定样式规则的应用优先权（优先级）。语法格式`{ cssRule !important }`，即写在定义的最后面，例如：`

朱雀/ 2021年07月04日 23:51/ 0 赞/ 560 阅读