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

この記事では、dom要素を取得するためのvueの注意点と、dom要素を取得するためのvueの内容を中心に紹介しますので、必要な方は参考にしてください

mounted(){
    setTimeout(()=>{
     this.contentToggle();
    },1000)
  },

methods:{
   contentToggle(){
    console.log(this.$refs.bodyFont.offsetHeight);
   }
  }

vueがdom要素の高さを取得したい場合、一般的に次のことが考えられます。ここで、つまり dom をロードした後、それを取得しますが、結果は思ったとおりではありません。また、

this.$nextTick(()=>{
   
    //函数
})

を使用して取得することも考えましたが、まったく役に立たないことがわかりました。 /。 。

したがって、最善の方法は、setTimeout タイマーを使用することです。時間を 0 に設定できますが、有効になる場合と無効になる場合があります。確実に実行できるように、小さな時間値を追加する方が安全です。最後に、この原則は Vue の多くの値転送の問題に当てはまります。最初に渡された値を取得できない場合は、setTimeout を使用してください。

ps: VUEはDOM要素の内容を取得します

refを通じてdom要素を取得します

vue公式サイトでのrefの説明

refは要素やサブコンポーネントの参照情報を登録するために使用されます。参照情報は親コンポーネントの$refsオブジェクトに登録されます。通常の DOM 要素で使用される場合、参照は DOM 要素を指します。サブコンポーネントで使用される場合、参照はコンポーネント インスタンスを指します

v-for が要素またはコンポーネントで使用される場合、参照情報には DOM が含まれます。ノードまたはコンポーネント インスタンスの配列

たとえば、今達成したいのは、v-for で生成された li をクリックして要素の値を取得することです

まず第一に、現在クリックされている li 要素を取得する必要がありますやるべきことは

1. dom

<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
  <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

にclickイベントとref属性を追加することです

setPageMenu(index) {
//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
  let getMenuText = this.$refs.menuItem[index].innerText;
}

以上が私が皆さんのためにまとめたものです。将来すべての人に役立ちます。

関連記事:

webpackでdevtoolを使って詳しく解説

JavaScriptで暗黙的呼び出しを使うには？

vue.js 大規模なシングルページアプリケーションの構築方法

Moments で WeChat 共有を実装し、Vue で友達に送信する方法

vuex の実装方法の詳細な説明 (詳細なチュートリアル)

vue.js WeChat Payを通じて実装

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