この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 各店舗には対応する商品オプションがあり、店舗別に選択、商品選択、店舗選択、商品数量の増減、削除が可能です。 コード: <スクリプト> エクスポートデフォルト{ データ() { 戻る { count:0, //全商品の数 shopCarList: [], //全商品 selectList:[] //選択した商品} }, 計算: { //選択した合計価格 selectPrice(){ this.selectList.reduce((total,item,index)=>{ を返します。 合計+item.quantity*(item.activityPrice || item.price) を返します。 },0) }, //選択の合計数 selectNum(){ this.selectList.reduce((total,item,index)=>{ を返します。 合計+アイテム.数量を返します。 },0) }, //すべて選択するかどうか isSelectetAll(){ this.shopCarList.every(item=>{ を返します。 item.shopSelect===true を返します }) } }, メソッド: { //インクリメント(itm){ itm.quantity<itm.stock?itm.quantity++:''; }, //減分 decrement(itm){ itm.quantity>1?itm.quantity--:'' }, //すべて選択 allChooseHandle() をクリック{ this.initSelectAll(!this.isSelectAll); }, //商品の単一選択クリック productChooseHandle(itm,index){ productFlag = !itm.productSelect; とします。 これを$set(itm,'productSelect',productFlag); shopFlag = this.shopCarList[index].products.every(i=>{ とします。 i.productSelect===true を返します。 }) this.$set(this.shopCarList[index],'shopSelect',shopFlag); 選択されたものを取得します。 }, //ショップの単一選択クリック shopChooseHandle(item,index){ Flag = !item.shopSelect; とします。 this.$set(item,'shopSelect',フラグ); アイテム.製品.forEach((itm,idx)=>{ this.$set(itm,'productSelect',フラグ); }) 選択されたものを取得します。 }, //選択された商品を取得する getSelected(){ tempArr = [] とします。 this.shopCarList.forEach((item,index)=>{ アイテム.製品.forEach((itm,idx)=>{ if(itm.productSelect){ tempArr.push(itm); } }) }) this.selectList = tempArr; }, //すべて選択するかどうかの初期化 initSelectAll(Flag){ this.shopCarList.forEach((item,index)=>{ this.$set(item,'shopSelect',フラグ); アイテム.製品.forEach((itm,idx)=>{ this.$set(itm,'productSelect',フラグ); }) }) 選択されたものを取得します。 }, //ショッピングカートリストを取得する getCarList(){ これを返します。$api.personal.getCarList().then(res=>{ 結果==='000'の場合 //期限切れの商品の数 let expiredNum = 0; res.data.expiredList.forEach(item=>{ アイテム.製品.forEach(itm=>{ 期限切れ数 += 数量 }) }) // 有効な商品数量 this.count = res.data.count - expiredNum; ショップカーリストを作成します。 Promise.resolve() を返す } }) }, //クリック削除 delCarList(itm,index,idx){ this.$api.personal.delCarList( [itm.carId] ).then(res=>{ 結果==='000'の場合 this.count -= itm.quantity; this.shopCarList[index].products.splice(idx,1); if(this.shopCarList[index].products.length===0){ this.shopCarList.splice(インデックス、1); } 選択されたものを取得します。 } }) }, }, 作成された() { this.getCarList().then(()=>{ これをinitSelectAll(true); }); }, }; </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL パスワードは正しいが、ローカルにログインできない -1045
>>: アイデアを war パッケージにパッケージ化し、tomcat にデプロイしてアクセス パスの問題 (図とテキスト)
デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...
Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...
恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...
MySQL 環境をローカル (192.168.1.152) にデプロイし、リモート クライアント 1...
CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...
序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...
この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...
この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...
目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...
目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...
ロード バランシングは、サーバー クラスタの展開でよく使用されるデバイスです。マシンのパフォーマンス...
トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...
複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...
問題の説明ご存知のとおり、CSS を記述する場合、HTML のクラスの定義または ID の定義に従っ...
目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...