この記事では、ショッピングカートを実装するための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 のインストール、展開、使用方法の詳細な説明
Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...
実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...
ドッカーの作成 バージョン: '2' サービス: fastdfsトラッカー: ホスト...
<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...
今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...
前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...
これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...
いわゆる 3 列適応レイアウトとは、両側の幅が固定され、中央のブロックの幅が適応されることを意味しま...
目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...
前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...
この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...
この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...
HTML5 で contentEditable 属性が導入されて以来、div は textarea ...
マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...
webpack-dev-server コアコンセプトWebpack の ContentBase と ...