1. 監視プロパティを監視するこのプロパティは、特定のデータの変更を監視し、対応するコールバック関数の実行をトリガーするために使用されます。 基本的な使用法: オブジェクトの値を持つ コールバック関数には 2 つのパラメーターがあります。
カウンタ: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <div>カウンター {{ shu }}</div> <span>変更前: {{ov}}</span> <span>変更後: {{nv}}</span> <br /> <button @click="shu++">1つ追加</button> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ: { シュウ:1、 ov:0, 0 です }, 方法:{ } }) vm.$watch("shu",function(nval,oval){ vm.$data.ov = 楕円 vm.$data.nv = nval }) </スクリプト> </本文> </html> リスナーを追加し、カウンターの値が変更される前の値を変数 vm.$watch("shu",function(nval,oval){ vm.$data.ov = 楕円 vm.$data.nv = nval })
1. ショッピングカート<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <テーブル> <tr> <th>シリアル番号</th> <th>製品名</th> <th>製品価格</th> <th>購入数量</th> <th>オペレーション</th> </tr> <tr v-for="sp 内の sp"> <td>{{ sp.id }}</td> <td>{{ sp.name }}</td> <td>{{ sp.money }}</td> <td> <button v-on:click="sp.sum=sp.sum-1">-</button> {{sp.sum}} <button v-on:click="sp.sum=sp.sum+1">+</button> </td> <td> <button v-on:click="sp.sum=0">リセット</button> </td> </tr> </テーブル> <div> 要素 合計金額: {{ getmany() }} </div> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ: { 補足:[ { id:1, 名前:"Apple 13", お金:6000、 合計:1 }, { id:2, 名前:"Apple 12", お金:5000、 合計:1 }, { id:3, 名前:"Apple 11", お金:4000、 合計:1 } ] }, 方法:{ getmaney:関数(){ var m = 0; for(var x=0;x<this.sps.length;x++){ m = m + this.sps[x].money * this.sps[x].sum; } m を返します。 } } }) </スクリプト> </本文> </html> 合計費用は以下のとおりです。 getmaney:関数(){ var m = 0; for(var x=0;x<this.sps.length;x++){ m = m + this.sps[x].money * this.sps[x].sum; } m を返します。 } 2. すべて選択し、すべて選択解除する<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <input type="checkbox" id="a" value="a" v-model="che"/> <label for="a">a</label> <input type="checkbox" id="b" value="b" v-model="che"/> <label for="b">b</label> <input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" /> <label for="box">すべて選択</label> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ: { チェック済み:false、 che:[], しゅず:["a","b"] }, 方法:{ ccall:関数(){ //すべてのステータスを選択 if(this.checked){ this.che = this.shuzu }それ以外{ //すべての選択を解除 this.che=[] } } }, 時計:{ "che":関数(){ //すべて選択するかどうかを判定する if(this.che.length == this.shuzu.length){ this.checked = true }それ以外{ this.checked = false } } } }) </スクリプト> </本文> </html> 2. 計算されたプロパティ1.計算された特徴:
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <p>{{ 混乱 }}</p> <p>{{ レメス }}</p> <p>{{ mess.split('').reverse().join('') }}</p> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ:{ 混乱:'abcd' }, 計算: { remess:関数(){ this.mess.split('').reverse().join('') を返します } } }) </スクリプト> </本文> </html> 2.方法
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <input v-model="mess" /> <p>{{ 混乱 }}</p> <p>{{ レメス }}</p> <p>{{ remess2() }}</p> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ:{ 混乱:'abcd' }, 計算: { remess:関数(){ this.mess.split('').reverse().join('') を返します } }, メソッド: { remess2:関数(){ this.mess.split('').reverse().join('') を返します } } }) </スクリプト> </本文> </html> 3. セッターページが特定のデータを取得すると、まずデータ内を検索します。データが見つからない場合は、計算属性内を検索します。計算属性内のデータを取得すると、get メソッドが自動的に実行され、set メソッドも提供されます。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./js/vue.js"></script> </head> <本文> <div id="アプリ"> <p>{{ サイト }}</p> </div> <スクリプト> var vm = 新しい Vue({ el: '#app', データ: { 名前: 'xiaowang', '01' の }, 計算:{ サイト:{ 取得: 関数(){ this.name+' '+this.cls を返す }, 設定: 関数(値){ var names = Value.split('|') this.name = 名前[0] this.cls = 名前[1] } } } }) vm.site = 'xiaowang|01'; document.write('name:'+vm.name); document.write('<br>'); document.write('class:'+vm.cls); </スクリプト> </本文> </html> Vue リスニング プロパティと計算プロパティに関するこの記事はこれで終わりです。Vue リスニング プロパティと計算プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 自動検索提案機能のスタイルファイルを入力します: suggestion.css
>>: CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。
目次1. ルートパスワードを忘れてしまい、データベースにアクセスできない: DBA にとって、スーパ...
Windows システム向け MySQL インストール チュートリアルダウンロード1. https:...
lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...
多方向探索ツリー完全二分木の高さ: O(log2N)、ここで2は対数完全なM方向探索木の高さ: O(...
検証環境: [root@~~/]# rpm -qa | grep mysql mysql-5.6.2...
目次1. コンポーネント通信1. Props 親コンポーネント ---> 子コンポーネント通信...
問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...
前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...
コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...
1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...