vue---$refs的用法【详解】
作者:互联网
在用VUE开发项目的时候,经常会使用到$refs来操作DOM,那么它究竟该怎么使用呢?
首先,平时在用JS开发项目的时候,获取DOM元素,使用的是 document.querySelector("#id") 来获取DOM元素,并且可以操作或获取其属性,例如获取 input 的 value 值。
如果是使用VUE,可以使用 ref 来进行绑定,就不需要获取DOM节点了,然后通过 $refs 来进行操作或获取属性。
例如使用 JavaScript 里面通过 this.$refs.input1 去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗。
示例:
<div id="app"> <input type="text" ref="input1" /> <button @click="add">添加</button> </div>
代码:
add:function(){ // this.$refs[input1].value = "test"; // 可以用运算符去访问 this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗 }
这里的 $refs 相当于是一个通用选择器,然后通过 key 去访问存储的对象。
打完收工!
标签:vue,DOM,refs,input1,value,---,获取,VUE 来源: https://www.cnblogs.com/e0yu/p/16135936.html