ホームページ > 記事 > ウェブフロントエンド > Vue で $refs を使用する方法
今回は、vue で $refs を使用する方法と、vue で $refs を使用する際の 注意事項 を説明します。実際のケースを見てみましょう。
一般に、DOM 要素を取得するには、<a href="http://www.php.cn/code/658.html" target="_blank">document<p style="text-align: left;">.querySelector(".input1 " )</p></a>
この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")
を取得し、input1 の値を取得します。
しかし、ref でバインドした後は、dom ノードを取得する必要はなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、javascript
でこれを呼び出します:this.$refs.input1
This dom ノードの取得の消費を減らすことができます使用方法は次のとおりです:HTML:rrreeeJS:rrreee
以下は vue $refs の基本的な使用方法の紹介です。具体的なコードは次のとおりです。 rrreee
document.querySelector(".input1")
で DOM ノードを取得し、次に input1 の値を取得する必要があります。 しかし、ref でバインドした後は、dom ノードを取得する必要はなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、JavaScript で this.$refs.input1 を呼び出します。これにより、dom ノードの取得にかかる消費量が減ります。
以上がVue で $refs を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。