この記事の例では、ショッピングカートの計算を実装するための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 にデプロイしてアクセス パスの問題 (図とテキスト)
1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...
このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...
公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...
目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...
SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...
MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...
原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...
参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。 jisa...
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...