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

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

#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 サイトの他の関連記事を参照してください。