$nextTick()this.$nextTick() は、次の DOM 更新サイクルが終わるまでコールバックを遅延します。データの変更後すぐに使用し、DOM が更新されるまで待機します。 使用シナリオ 変数が最初に割り当てられたか更新されたが、DOM が更新されていない場合、変数値の使用は機能しないことがあります。この時点で、 this.$nextTick() を使用して DOM 更新が読み込まれるのを待機し、すぐに使用する必要があります。作成されたフック関数や DOM 更新を伴う状況でよく使用されます。 this.$nextTick(() => { this.$refs.table.refresh(true)}) this.$nextTick() は、ページインタラクション、特にバックグラウンドからデータを取得した後のDOMオブジェクトの再生成後の操作において大きな利点があります。 $forceUpdate()Vue インスタンスを強制的に再レンダリングします。これは、すべての子コンポーネントではなく、インスタンス自体とスロット コンテンツに挿入された子コンポーネントにのみ影響することに注意してください。 使用シナリオ オブジェクトの配列などの複雑なオブジェクトの場合、配列内の要素に属性を直接追加したり、配列の長さを直接 0 に変更したりできます。Vue は変更が発生したことを認識できないため、強制更新を使用できます。 一方、フォームがレンダリングされるときに、選択操作が実行されることがありますが、フォームの内容は更新されません。強制更新を使用することができます。 使用法 this.$nextTick(() => { this.$refs.table.refresh(true) }) $セット()使用シナリオ ES5 の制限により、Vue.js はオブジェクト プロパティの追加または削除を検出できません。 レスポンシブ オブジェクトにプロパティを追加し、新しいプロパティもレスポンシブであり、ビューの更新をトリガーすることを確認します。 Vue は通常の新しいプロパティ (this.myObject.newProperty = 'hi' など) を検出できないため、レスポンシブ オブジェクトに新しいプロパティを追加するにはこれを使用する必要があります。
使用法
// オブジェクト this.$set(this.student,"age", 24) // 配列 this.$set(this.arrayList, 2, { name: "张三" }) .sync——2.3.0 以降の新機能 (Vue 3.x では v-model に置き換えられ、サポートされなくなりました)使用シナリオ 場合によっては、プロパティに対して「双方向バインディング」を実行する必要があります。Vue 2.3.0 以降では、.sync 修飾子を使用してこれを実行できます。 Vue 3.0以降はサポートされなくなりました 使用法 親コンポーネント <comp :foo.sync="bar"></comp> 実際、それは次のように拡張される。 <comp :foo="bar" @update:foo="val => bar = val"></comp> サブコンポーネント this.$emit('update:foo', newValue) 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ROS2のインストールとdocker環境の使い方について
1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...
序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...
mysql5.7.17無料インストールバージョンのインストールに関する最近の経験1.ダウンロードして...
目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...
CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...
「初心者向けソースコードからの MySQL デッドロック問題の理解」では、MySQL ソースコードを...
CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...
1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...