ホームページ  >  記事  >  ウェブフロントエンド  >  VueでDOM要素を取得する方法

VueでDOM要素を取得する方法

下次还敢
下次还敢オリジナル
2024-04-30 04:09:15557ブラウズ

Vue では、DOM 要素を取得する方法が 3 つあります。 1. ref 属性を使用して要素の参照変数を指定し、this.$refs を通じてアクセスします。 2. のルート要素を直接使用します。コンポーネント this.$el; 3. querySelector メソッドを使用してバインドされた要素をクエリします。

VueでDOM要素を取得する方法

#Vue で DOM 要素を取得する

Vue アプリケーションでは、次のメソッドを通じて DOM 要素を取得できます。

#1. ref 属性

##ref
    属性をコンポーネントまたは要素に追加し、参照変数名を指定します。
  • Vue インスタンスでは、this.$refs
  • オブジェクトを使用して、
  • ref 属性を持つ要素にアクセスできます。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;vue&quot;&gt;&lt;template&gt; &lt;div ref=&quot;myDiv&quot;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import { ref } from 'vue' export default { setup() { const myDiv = ref(null) // 声明一个空引用变量 return { myDiv } }, mounted() { console.log(this.$refs.myDiv) // myDiv 元素 } } &lt;/script&gt;&lt;/code&gt;</pre>
  • 2. $el 属性

$el
    属性は、現在のコンポーネントのルート要素を指します。
  • <pre class="brush:php;toolbar:false">&lt;code class=&quot;vue&quot;&gt;&lt;template&gt; &lt;div&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import { ref } from 'vue' export default { setup() { const myDiv = ref(null) // 声明一个空引用变量 return { myDiv } }, mounted() { console.log(this.$el) // 组件的根元素 } } &lt;/script&gt;&lt;/code&gt;</pre>
  • 3. querySelector

Vue インスタンスを使用して、バインドされた要素で

querySelector
    メソッドを呼び出します。
  • うわー

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。