この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html lang="ja" xmlns:v-on="http://www.w3.org/1999/xhtml"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <script src="../lib/vue.min.js"></script> </head> <本文> <div id="app" style="position: relative;left: 30%"> <テーブルセルパディング="10"> <頭> <th><input type="checkbox" v-model="cb" v-on:click="allSelect">すべて選択</th> <th>名前</th> <th>単価</th> <th>数量</th> <th>金額</th> <th>オペレーション</th> </thead> <t本文> <tr v-for="情報内のx"> <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td> <td>{{x.name}}</td> <td>{{x.価格}}</td> <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td> <td>{{x.total}}</td> <td><button v-on:click="del(x)">削除</button></td> </tr> </tbody> </テーブル> <Br> <p>合計金額: {{all}}</p> </div> <スクリプト> var vm = 新しい Vue({ el: "#app", データ: { すべて: 0, cb: 偽、 情報: [{ bol: 偽、 名前: "iphone7", 価格: 6000、 番号: 1, 合計: 6000 }, { bol: 偽、 名前: "Honor 6x", 価格: 1200、 番号: 1, 合計: 1200 }, { bol: 偽、 名前: 「デル ラップトップ」、 価格: 4000、 番号: 1, 合計: 4000 }] }, メソッド: { //単価計算 count: function(obj) { for(var i = 0; i < this.info.length; i++) { // if(this.info[i] == obj) { this.info[i].total = obj.price * obj.num; } //選択した場合、合計金額を計算します if(obj.bol) { this.allSelect(); } } }, //削除 del: function(obj) { this.info.splice(this.info.indexOf(obj), 1) this.allCount(); }, //単一選択記号: function() { this.allCount(); }, //すべて選択allSelect: function() { for(var i = 0; i < this.info.length; i++) { this.info[i].bol = this.cb; } this.allCount(); }, //合計金額を計算する allCount: function() { // 合計金額を計算するたびに、これをクリアする必要があります。all = 0; for(var i = 0; i < this.info.length; i++) { //選択した製品を計算する if(this.info[i].bol) { this.all += this.info[i].total; } } } } }) </スクリプト> </本文> </html> 効果画像: その他の記事については、「Vue.js フロントエンドコンポーネント学習チュートリアル」をクリックして学習し、読むことができます。 vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。 Vue 学習チュートリアルの詳細については、特別トピック「Vue 実践チュートリアル」をお読みください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での nginx のインストール、展開、使用方法の詳細な説明
目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...
序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...
アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカ...
Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...
あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...
最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...
この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...
runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...
序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...
目次1件のレビュー2 水平分割の5つの戦略2.1 ハッシュ2.2 範囲2.3. キー2.4. リスト...
目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...
この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...
この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...