vue で dom 要素を取得するために使用される属性

Vue の ref 属性を通じて DOM 要素への参照を取得できます。具体的な手順は次のとおりです。参照変数を定義し、参照する DOM 要素の ref 属性に追加します。 DOM 要素にアクセスするには、マウントされたフック内の $refs オブジェクトを使用します。注: 参照変数はコンポーネントがインスタンス化される前に定義する必要があり、DOM 要素にはマウントされたフックでのみアクセスでき、$refs オブジェクトは読み取り専用です。

ref 属性を通じて DOM 要素を取得する

Vue では、ref# を使用できます。 ## 属性 DOM 要素への参照を取得します。次の手順に従って DOM 要素を取得します。

1. 参照変数を定義します

Vue インスタンスまたはコンポーネントで、DOM 要素の参照を格納するために使用される変数を定義します。例:

<code class="javascript">export default {
  mounted() {
    this.myElementRef = null;
  }
};</code>

2。 ref 属性を DOM 要素

に追加します。

ref 属性を参照する DOM 要素を取得し、定義された参照変数に値を設定するには:

<code class="html"><div ref="myElementRef"></div></code>

3 マウントされたフック

In # の要素にアクセスします。 ##mounted

フックでは、$refs オブジェクトを使用して DOM 要素にアクセスできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;javascript&quot;&gt;export default { mounted() { const myElement = this.$refs.myElementRef; // 现在可以对 myElement 进行操作 } };&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

ref

属性を使用する場合は、次のものが必要です。次の点に注意してください。

参照変数は、コンポーネントのインスタンス化の前に定義する必要があります。

• DOM 要素への参照はそのフックの前では利用できない可能性があるため、
mounted
• フック内でアクセスする必要があります。
$refs
• オブジェクトは読み取り専用であり、直接変更できません。

以上がvue で dom 要素を取得するために使用される属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。