ホームページ > ウェブフロントエンド > Vue.js > vue で dom 要素を取得するために使用される属性

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

下次还敢
リリース: 2024-04-27 23:54:34
オリジナル
422 人が閲覧しました

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

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

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

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

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

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

export default {
  mounted() {
    this.myElementRef = null;
  }
};
ログイン後にコピー

2。 ref 属性を DOM 要素

に追加します。

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

<div ref="myElementRef"></div>
ログイン後にコピー

3 マウントされたフック

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

フックでは、$refs オブジェクトを使用して DOM 要素にアクセスできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default { mounted() { const myElement = this.$refs.myElementRef; // 现在可以对 myElement 进行操作 } };</pre><div class="contentsignin">ログイン後にコピー</div></div></p>ref<p> 属性を使用する場合は、次のものが必要です。次の点に注意してください。 <code>

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

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

関連ラベル:
vue
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート