首頁  >  文章  >  web前端  >  怎麼使用vue中$refs

怎麼使用vue中$refs

php中世界最好的语言
php中世界最好的语言原創
2018-06-02 10:46:381176瀏覽

這次帶給大家怎麼使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn