vue.js が dom を操作する方法

Vue.js の dom 操作方法: 1. ネイティブ js で dom を操作します、コードは [const dom = getElementById('box')]; 2. vue 公式メソッド ref を使用します、コードは [< div クラス =“set” ref =“up”>]。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

【おすすめ関連記事：vue.js】

vue.jsによるdomの操作方法：

1. ネイティブ js 操作 dom

2. Vue 公式メソッド: ref

vue の ref は、「現在の dom 要素を抽出する」ことです。 " "出てきてください。#

を取得するには this.$refs を渡すだけです。set は操作したい dom オブジェクトであり、その ref は up

です要素にはクリック イベントがあります。

次はこのメソッドを書きましょう

まだ CSS が必要ですか?

それでは、すべてのコードをここに貼り付けますので、ご自身の目で確認してください

テキストとスクリプトを合わせたよりも多くの CSS があります。CSS を理解できるのであれば、そうする理由はありません。 ref

3 番目の方法もあります。jQuery で dom を操作します。これを読んだ後は、あえて使用しません。

3. jQuery で dom を操作します

jQuery ツールのオプションを使用し、操作する対応する dom を選択するだけですが、jQuery がページ上のすべての要素を見つけるために要素を取得することは誰もが知っています。これは、必要なdomは見つかりますが、vueは単一ページなので、jQueryはVueの現在のページを取得するだけではなく、ルートルートから全検索してdomを取得し、同じ要素が他のページに出現した場合も取得してしまいます。 , jQueryで操作するdomを動的に取得したデータを元にレンダリングする場合、mountedメソッドに書かれた操作が無効になるためupdateに配置する必要があり、一部の操作が複数回実行されることになるため、やはり推奨できませんVue で jQuery を使用するには。

関連する無料学習の推奨事項: JavaScript 学習チュートリアル

以上がvue.js が dom を操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。