1. 次のコードはwatchの簡単な使用法です<div id="アプリ"> <input type="text" v-model="firstName" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <スクリプト> var vm = 新しい Vue({ el:"#アプリ", データ:{ firstName:"张" }, 時計:{ firstName:(新しい値、古い値){ //firstNameは監視したいデータの名前です。v-modelのfirstNameを監視するなど、監視したい関数名を使用します。 //newVal: 変更後の値、つまり最初のパラメータを示します。位置を入れ替えないでください。//oldVal: 変更前の値を示します。 console.log({newVal,oldVal}); // {newVal: "陈", oldVal: "张"} } // 監視関数を直接記述し、cityName 値が変更されるたびに関数を実行します。 // 監視データの直後に文字列形式でメソッド名を追加することもできます: firstName: 'nameChange' }, 方法:{ 名前変更(){ } } }) vm.firstName = "陈"; // 監視対象の値を変更する</script> 2. 即時監視watch の基本的な使い方では、値が初めてバインドされるときにはリスニング関数は実行されず、値が変更されたときにのみ実行されるという特徴があります。値が最初にバインドされたときに関数を実行する必要がある場合は、immediate 属性を使用する必要があります。 時計: ファーストネーム: { ハンドラ(新しい名前、古い名前) { this.fullName = newName + ' ' + this.lastName; }, { 即時: true } } } 監視対象データは、ハンドラメソッドと即時処理を含めてオブジェクト形式で記述されます。上記の簡単な記述で記述した関数は、実際にはこのハンドラメソッドを記述しており、デフォルトでは省略されています。 3. ハンドラメソッド<div id="アプリ"> <div> <p>番号: {{ myNumber }}</p> <p>数値: <input type="text" v-model.number="myNumber"></p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <スクリプト> 新しいVue({ el: '#app', データ: { myNumber: 'Dawei' }, 時計: 私の番号: { ハンドラ(newVal, oldVal) { コンソールにログ出力します。 コンソールにログ出力します。 }, //immediate が true の場合、コールバック関数はすぐにトリガーされます。false の場合、上記の例と同様に、コールバックはすぐには実行されません。 即時: 真 } } }) </スクリプト> //ハンドラメソッドはウォッチで実行する必要がある特定のメソッドです 4. 深い属性オブジェクトやプロパティをどのように監視するのでしょうか?それではdeep属性を紹介しましょう。その役割がこの問題を解決する鍵となります。 <div id="ルート"> <p>obj.a: {{obj.a}}</p> <p>obj.a: <input type="text" v-model="obj.a"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <スクリプト> 新しいVue({ el: '#root', データ: { オブジェクト: { 123 です } }, 時計: オブジェクト: { ハンドラ(新しい名前、古い名前) { console.log(新しい名前、古い名前); }, 即時: true、 深い:本当 } } }) </スクリプト> 上記のコードは deep:true を付けて追加しないとコンソールでは実行されません。初回のみ実行され、出力結果は未定義になります。 デフォルトでは、ハンドラーは obj プロパティの参照の変更のみを監視します。obj に値を割り当てたときのみ監視します。 このとき、ディープ オブザベーションを使用できます。リスナーはレイヤーごとに下に移動し、このリスナーをオブジェクトのすべてのプロパティに追加しますが、これには時間がかかりすぎます。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。
>>: docker で PostgreSQL データベースをインストールして永続化する方法
少し前に、製品バージョンをテスト用にテスターに提出したのですが、テスト結果はまったく予想外のもの...
ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...
太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...
問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...
現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...
データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...
マウスが画像上にあるときにズームインおよびズームアウトするには、JS を使用します。具体的なコードは...
今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...