Vue が DOM 要素を取得して属性を設定する 2 つの方法

この記事では主に、Vue で DOM 要素を取得し、属性を設定するための 2 つの実装方法を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ここでは 2 つの方法を考えました:

方法 1:

対応する要素に id を直接追加し、document.getElementById("id"); を通じて取得し、対応する属性またはスタイルを設定します

方法2:

ref を使用し、対応する要素に ref="name" を追加してから、this.$refs.name を使用して要素を取得します

注: 対応する要素を取得する前に、マウント フックを使用してマウントする必要があります。取得された値は空です、

サブコンポーネントにIDを追加してカスタム属性を変更すると、そのサブコンポーネントに対応する外側のpに直接ロードされ、サブコンポーネントの元のカスタム属性の値は反映されません

サブコンポーネントに ref を追加し、DOM 要素を取得した後に対応するカスタム属性の値を変更すると、次のエラーが報告されます:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

関連する推奨事項:

HTML の name 属性を使用します。 dom要素を取得する

DOMオブジェクトを取得する_javascriptスキルのいくつかの拡張と略語

JavaScriptを使用してDOM要素の位置とサイズを取得する方法_基礎知識

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