怎麼使用vue中$refs

這次帶給大家怎麼使用vue中$refs，使用vue中$refs的注意事項有哪些，以下就是實戰案例，一起來看一下。

一般來講，取得DOM元素，需<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"）取得這個dom節點，然後在取得input1的值。

但用ref綁定之後，​​我們就不需要在取得dom節點了，直接在上面的input上綁定input1，然後$refs裡面呼叫就行。

然後在javascript裡面這樣呼叫：this.$refs.input1 這樣就可以減少取得dom節點的消耗了

用法如下:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

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

下面要跟大家介紹下vue $refs的基本用法，具體程式碼如下所示：

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<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節點的消耗了

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用vue實作簡訊驗證效能最佳化

如何實作vue專案中vue-i18n和element-ui國際化開發

以上是怎麼使用vue中$refs的詳細內容。更多資訊請關注PHP中文網其他相關文章！