标签：vue DOM refs input1 value --- 获取 VUE

在用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。