1. 計算プロパティ意味
原理
get 関数はいつ実行されますか?
利点
述べる
構文: 1. 省略形:計算: { 「計算されたプロパティ名」() { 「値」を返す } } 要件: 2つの数字の合計を計算し、ページに表示する <テンプレート> <div> <p>{{ 数値 }}</p> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { 10, 20歳 } }, // 計算されたプロパティ: // シナリオ: 変数の値を別の変数を使用して計算する必要がある/* 文法: 計算: { 計算されたプロパティ名() { 戻り値} } */ // 注: 計算属性とデータ属性はどちらも変数であるため、同じ名前を持つことはできません // 注 2: 関数内で変数が変更された場合、結果は自動的に再計算され、計算結果が返されます: { 数値(){ this.a + this.b を返す } } } </スクリプト> <スタイル> </スタイル> 文法: 2. 文章を完成させる:計算プロパティは構成オブジェクトの形式で記述されます。オブジェクトではget関数とset関数が使用されます。 get の役割: 誰かが fullName を読み取ると、get が呼び出され、戻り値が計算プロパティの値として使用されます (get は return を書き込む必要があります) いつ呼び出されますか? 1. fullName が初めて読み取られるとき。 2. 依存するデータが変更された場合。 得る(){ console.log('get が呼び出されました') // console.log(this) // this は vm (Vue インスタンス) です this.firstName + '-' + this.lastName を返します }, set: 計算プロパティの値が変更されると、呼び出されたパラメータは渡された新しい値を受け取ります。 ... 計算:{ フルネーム: //get の機能は何ですか?誰かが fullName を読み取ると、get が呼び出され、戻り値が fullName の値として使用されます。//get はいつ呼び出されますか? 1. fullName が初めて読み取られるとき。 2. 依存するデータが変更された場合。 得る(){ console.log('get が呼び出されました') // console.log(this) // これはvmです this.firstName + '-' + this.lastName を返します }, //set はいつ呼び出されますか? fullName が変更されたとき。 設定(値){ console.log('set',値) 定数 arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) 2. モニタリング(リスニング)特性<!-- イベントをバインドする場合: @xxx="yyy" yyy はいくつかの簡単なステートメントを記述できます --> <button @click="isHot = !isHot">天気を切り替える</button> 1. 監視属性の監視:監視対象の属性が変更されると、ハンドラコールバック関数が自動的に呼び出され、関連する操作が実行されます。 監視対象の属性は、監視する前に存在している必要があります。 ! ... // 記述方法 1. ishot 属性をリッスンするためのウォッチ構成を渡します。watch:{ ホット:{ immediate:true、//初期化中にハンドラを呼び出す //ハンドラはいつ呼び出されますか? isHot が変化するとき。 ハンドラー(新しい値、古い値){ console.log('isHot が変更されました', newValue, oldValue) } } } }) // 方法 2. vm.$watch('isHot',{ を介して監視する immediate:true, //初期化中にハンドラを呼び出す。デフォルトは false // ハンドラはいつ呼び出されますか? isHot が変化するとき。 handler(newValue,oldValue){ // パラメータは2つあり、1つは新しい値、もう1つは古い値です。 console.log('isHot が変更されました',newValue,oldValue) } }) 2. 徹底的な監視ディープモニタリング:
述べる:
データ:{ isHot:true、 数字: a:1、 1:1 1:1 } }, 時計:{ // マルチレベル構造内の特定の属性の変更を監視します (元の記述方法では引用符を追加する必要があり、省略形は省略できますが、この場合は追加する必要があります。そうしないとエラーが報告されます) /* '数値.a': { ハンドラ(){ console.log('a が変更されました') } } */ // マルチレベル構造番号内のすべての属性の変更を監視します:{ deep:true, // これが有効になっていない場合、監視は数値のアドレスが変更されたかどうかになります handler(){ console.log('数値が変更されました') } } } 監視プロパティ - 省略形 監視プロパティに handler() のみがあり、他の構成項目を有効にする必要がない場合は、これを省略できます。 時計:{ isHot(新しい値、古い値){ console.log('isHot が変更されました',newValue,oldValue,this) } } /* vm.$watch('isHot',関数(newValue,oldValue) { console.log('isHot が変更されました',newValue,oldValue,this) }) */ 3. 相違点と原則計算と監視の違い
2つの重要な原則
時計:{ firstName(値){ タイムアウトを設定します(()=>{ console.log(this) //vueインスタンスオブジェクト。通常の関数が使用されると、Windowが返されます。 this.fullName = val + '-' + this.lastName },1000); }, 姓(val){ this.fullName = this.firstName + '-' + val } } 要約するこれで、Vue の計算プロパティとプロパティ リスニングに関するこの記事は終了です。Vue の計算プロパティとプロパティ リスニングに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法
>>: Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法
今日は、Linux でリモート アクセス用に MySQL データベースを構成する方法について質問があ...
1. インラインスタイル仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェク...
mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...
SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...
x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...
この記事は主に、nginx 高可用性クラスタの実装プロセスを紹介します。この記事のサンプルコードは非...
Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...
基本的な使い方 <!DOCTYPE html> <html lang="...
最近、製品部門のユーザーエクスペリエンスチームの学生は、アライアンス環境における広告に関する一連の研...
背景今日、他のプロジェクト チームと協力してシステムのストレス テストを実施しているときに、プロ...
コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...
1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...
目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為:再描画再描画を引き...