Vue で $refs を使用する方法

今回は、vue で $refs を使用する方法と、vue で $refs を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

但是用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

rrreeeJS:rrreee
以下は vue $refs の基本的な使用方法の紹介です。具体的なコードは次のとおりです。 rrreee

しかし、ref でバインドした後は、dom ノードを取得する必要はなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、JavaScript で this.$refs.input1 を呼び出します。これにより、dom ノードの取得にかかる消費量が減ります。

以上がVue で $refs を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。