01. リスナーウォッチ(1)機能
エクスポートデフォルト{ データ() { 戻る { 番号: 1 } }, 時計:{ // 通常の監視方法。ここではデータ内の数値属性を監視することを意味します // 最初のパラメータは変更後の新しい値を示し、2 番目のパラメータは変更前の古い値を示します number(newVal,oldVal){ コンソールにログ出力します。 コンソールにログ出力します。 } } } (2)特性と方法
エクスポートデフォルト{ データ(){ 戻る { 番号: 1 } }, 時計: // 数値属性をリッスンする number: { ハンドラ(newVal, oldVal){ }, 即時: true, // すぐに聞く} } } (3)監視対象
エクスポートデフォルト{ データ() { 戻る { オブジェクト: { 1: 1 } } }, 時計: オブジェクト: { ハンドラ(newVal){ console.log('聞いている', newVal) }, 即時: 真 } }, 作成された(){ // 属性の変更操作であるため監視できません // 一度印刷すると、印刷結果は変更された値になります。 この.obj.a = 2 // オブジェクトへの直接割り当て操作なので監視できます // 2 回印刷します (即時監視は 1 回印刷され、変更は 1 回印刷されます) this.obj = {a: 2} } }
エクスポートデフォルト{ 時計: 'obj.a': { ハンドラ(newVal){ コンソールログ(新しい値) } } }, 作成された(){ // 次の両方とも監視して 2 回印刷できます this.obj.a = 2 this.obj = {a:2} } }
エクスポートデフォルト{ 時計: オブジェクト: { ハンドラ(newVal){ コンソールログ(新しい値) }, 深い:本当、 即時: 真 } }, 作成された(){ // 詳細な監視の後、属性の変更も直接監視できます // 2 回印刷します (即時のため) この.obj.a = 2 // オブジェクト プロパティの追加を監視できません // 一度印刷すると、印刷結果は新しく追加されたプロパティを持つオブジェクトになります // つまり、即時であるため 1 回だけ実行され、{a:1,b:2} が印刷されます この.obj.b = 2 // 監視はトリガーできますが、変更は監視できません // 2 回印刷され、両方の値は {a:2} であり、変更を反映できません this.$set(this.obj, 'a', 2) } } (4)リスニングアレイ
エクスポートデフォルト{ データ() { 戻る { 編曲: [1] } }, 時計: 編曲: { ハンドラ(newVal, oldVal) { console.log('新規:', newVal) console.log('古い:', 古い値) }, 即時: 真 } }, 作成された() { // 監視可能 --- 配列全体を直接割り当てる this.arr = [2] // 監視できません --- インデックスの割り当て、長さの変更 this.arr[1] = 2 this.arr[0] = 2 この.arr.長さ = 2 // 監視をトリガーできますが、変更を監視することはできません => 新しい値と古い値は同じです this.arr.push(2) this.$set(this.arr, 0, 2) } } 02. 計算プロパティ(1)属性計算のための設定法
計算: { フルネーム: 得る () { `${this.firstName} ${this.lastName}` を返します。 }, 設定(値) { const names = val.split(' '); this.firstName = 名前[0]; this.lastName = names[names.length - 1]; } } }
(2)違い
(3)利用シナリオ
以上がvue WatchとComputedの使い方の詳しいまとめです。vue WatchとComputedの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル
>>: Dockerでnginxをデプロイし、設定ファイルを変更する方法
目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...
目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...
目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...
DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...
最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...
パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...
この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...
序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...
目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...
1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...
序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...
目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....
最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...