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

Posted yanggb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

JavaScript

new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
    }
  }
})

这里的$refs可以看做是ref的选择器,这个$ref是一个对象,通过key可以获取到其中存放的对象。

 

"我只是怕我再也见不到你了。"

以上是关于vue中$refs的用法及作用详解的主要内容,如果未能解决你的问题,请参考以下文章

DOCTYPE声明作用及用法详解

Java中static作用及用法详解

转Class.forName()用法详解

PACKAGE-INFO.JAVA 作用及用法详解

vue中ref($refs)用法和作用

Class.forName()用法及与new区别 详解