這次帶給大家怎麼使用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-i18n和element-ui國際化開發
以上是怎麼使用vue中$refs的詳細內容。更多資訊請關注PHP中文網其他相關文章!