主な機能は次のとおりです。
効果図は以下のとおりです。関数がたくさんあるので、一つ一つ説明することはしません。まず、いくつかの主要な関数(追加、削除、変更、クエリ)のロジックについて説明し、最後にすべてのコードを載せます。 まず、製品機能の追加について見てみましょう //まず、イベントを表示するためのボタンをバインドしましょう。[追加] をクリックすると、ポップアップ ウィンドウが表示されます <button type="button" @click="xian">追加</button> //戻り値は、disのデフォルト値falseを定義します シアン(){ if (!this.dis == false) { this.dis = 偽 } それ以外 { this.dis = 真 } }, 次に、ポップアップ ウィンドウで [変更の確認] をクリックし、イベントをバインドして製品情報を追加します。 <button type="button" @click="tian">追加を確認する</button> //追加する製品情報を新しい配列にプッシュし、追加後にポップアップウィンドウを閉じます tian() { if (this.name == "" || this.county == "" || this.price == "") { alert("製品情報は空欄にできません!") 偽を返す } それ以外 { this.shopPings.push({ 名前: this.name, 国: この国、 価格: this.price, カウント: this.count, }) } this.name = "", this.countrty = "", this.price = "", this.count = "" this.dis = 偽 }, 商品を追加した後、商品情報が間違って記載されていることに突然気づきました! ! ? ?慌てないでください。関数を変更する方法をお見せしましょう いつものように、まず表示イベントをバインドするボタンを定義し、次に表示イベントをバインドします。イベント名を除いて、上で追加したものと同じです。確認変更機能を直接見てみましょう。 //ボタンバインディングイベントを定義します <button type="button" @click="xiugai">変更を確認</button> //ショッピングカート内の商品情報を変更し、変更後にポップアップウィンドウを閉じます。xiugai() { コンソールログ(this.int) インデックス = this.int とする console.log(this.name, this.price, this.count, ) this.shopPings[index].name = this.name this.shopPings[index].price = this.price this.shopPings[index].county = this.county this.shopPings[インデックス].count = this.count this.dis1 = 偽 }, 変更を加えた後、削除を記述しましょう ボタン バインディング イベントを定義し、インデックス値を渡し、最後に splice はインデックスに基づいて項目を削除します。 ボタンバインディングイベントを定義し、インデックス値を渡し、最後にスプライスは下付き文字 <button @click="del(index)">Delete</button> に従ってアイテムを削除します。 del(インデックス) { this.shopPings.splice(インデックス、1); }, ショッピング カートをクリアするのは比較的簡単です。ボタンをクリックした後、配列を空に設定するだけです。 すべて削除() { this.shopPings = [] }, 最後に、ショッピングカートのクエリ機能を見てみましょう。 // 入力値を返します // 入力ボックスを定義し、値をバインドし、キーボードの Enter イベントを設定し、検索イベントをバインドします <input type="text" placeholder="検索する製品の名前を入力してください" v-model="input_value" @keyup.13="search"> 詳細は注記を参照 //まずは判定を行います。検索ボックスが空の場合、空にできないというメッセージが表示されます。 //次に、検索用の配列内の各アイテムの名前を取得します。該当する商品名がない場合は、該当する商品がないことを通知します。 //最後に、配列フィルターをフィルタリングし、検索ボックスに入力された商品名とショッピングカート内の商品名を比較して該当する商品を見つけます。 search() { if (!this.input_value) { アラートを返す('コンテンツを入力してください') } もし ( this.shopPings.every((v) => { v.name.indexOf(この入力値) == -1 }) ){ this.input_value = '' アラートを返す('そのような製品はありません') } this.shopPings = this.shopPings.filter((v) => { v.name.replace(this.input_value, this.input_value) v.name.indexOf(this.input_value) != -1 を返します }) } 完全なコード:<テンプレート> <div class="shopCar"> <ヘッダー> <button type="button" @click="delSelect">一括削除</button> <button type="button" @click="alldel">ショッピングカートをクリア</button> <button type="button" @click="xian">追加</button> <button type="button" @click="jiang">並べ替え</button> <input type="text" placeholder="検索したい製品の名前を入力してください" v-model="input_value" @keyup.13="search"> <div class="xiu" v-show="dis1"> <input type="text" placeholder="名前" v-model="名前"> <input type="text" placeholder="価格" v-model="価格"> <input type="text" placeholder="数量" v-model="count"> <input type="text" placeholder="Origin" v-model="county"> <button type="button" @click="xiugai">変更を確認</button> </div> <div class="add" v-show="dis"> <input type="text" placeholder="名前" v-model="名前"> <input type="text" placeholder="価格" v-model="価格"> <input type="text" placeholder="数量" v-model="count"> <input type="text" placeholder="Origin" v-model="county"> <button type="button" @click="tian">追加を確認する</button> </div> </ヘッダー> <メイン> <ul> <li> <p><input type="チェックボックス" v-model="allChecked"> すべて選択</p> <p>名前</p> <p>起源</p> <p>数量</p> <p>単価</p> <p>小計</p> <p>操作</p> </li> <li v-for="(item,index) in shopPings" :key="index"> <p><input type="checkbox" v-model="item.checked">{{item.id}}</p> <p>{{アイテム名}}</p> <p>{{item.countrty}}</p> <p><button type="button" @click="add(item)">+</button> <input type="text" v-model="item.count" style="width:20px"> <button type="button" @click="remove(item)">-</button> </p> <p>{{item.price}}</p> <p>{{item.price*item.count |サフィックス}}</p> <p> <button type="button" @click="xiu(index)"> 変更</button> <button @click="del(index)">削除</button> </p> </li> </ul> </メイン> <フッター> <p>合計 {{state.sum |suffix}}</p> </フッター> </div> </テンプレート> <スタイル スコープ lang="scss"> .shopCar { 幅: 1000ピクセル; 境界線: 2px 黒一色; マージン: 100px 自動; オーバーフロー:自動; ヘッダー { ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; 幅: 600ピクセル; 高さ: 27px; オーバーフロー: 非表示; 。追加 { 幅: 400ピクセル; 背景: #e4e1e1; 位置: 絶対; 左: 39%; 上位: 40% 入力{ 表示: ブロック; マージン: 20px 自動; } ボタン { 表示: ブロック; マージン: 0 自動; } } .xiu { 幅: 400ピクセル; 背景: #e4e1e1; 位置: 絶対; 左: 39%; 上位: 40% 入力{ 表示: ブロック; マージン: 20px 自動; } ボタン { 表示: ブロック; マージン: 0 自動; } } } 主要 { // 高さ: 400px; 上マージン: 10px; ul { li { 高さ: 78px; border-bottom: 2px 黒一色; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; p { フロート: 左; 幅: 140ピクセル; 高さ: 27px; 境界線: 2px 黒一色; テキスト配置: 中央; } } } } フッター { 高さ: 50px; 上マージン: 13px; 行の高さ: 50px; } } </スタイル> <スクリプト> const shopData = [{ id: "", 名前:「靴」、 国:「山西省」、 カウント: 1, 価格: 800, }, { id: "", 名前:「キャビネット」、 国:「北京」、 カウント: 1, 価格: 3200、 }, { id: "", 名前: 「口紅」、 国:「河北省」、 カウント: 2, 価格: 200, }, { id: "", 名前:「ハンバーガー」、 国:「河南省」、 カウント: 2, 価格: 200, }, ] エクスポートデフォルト{ //フィルター: { 接尾辞(値) { 価格 = 数値(値)とする `¥${price.toFixed(2)}` を返す //金額の前に¥記号を挿入し、小数点を2桁として定義します} }, 計算: { //すべて選択 allChecked: { 得る() { const チェック済み = this.shopPings.filter((item) => item.checked) checks.length === this.shopPings.length を返します }, 設定(状態) { // コンソール.log(状態) this.shopPings.map((item) => { item.checked = 状態 返品商品 }) } }, //小計計算 totalPrice: function () { var 合計 = 0; (var i = 0; i < this.checkList.length; i++) { var item = this.checkList[i]; 合計 += アイテムの価格 * アイテムの数; } total.toLocaleString() を返します。 }, //選択したアイテムの合計価格を計算する state() { const チェック済み = this.shopPings.filter((item) => item.checked) const チェック済み = チェック済み.長さ === this.shopPings.長さ 定数sum = チェック済み.reduce((a, b) => { a + b.count * b.price を返します。 }, 0) 戻る { カウント: チェック数.長さ、 和 } }, }, データ() { 戻る { ショッピングPings: [], dis: false, //送信を確認 dis1: false, //変更を確認 id: "", name: "", //名前 price: "", //単価 count: "", //数量 counrty: "", //origin input_value: "", //クエリボックスに入力された値} }, マウント() { window.fetch("/").then(() => { this.shopPings = shopData.map((item) => { 項目がチェックされている = false 返品商品 }) }) }, メソッド: { //製品xian()を追加{ if (!this.dis == false) { this.dis = 偽 } それ以外 { this.dis = 真 } }, //tian() の追加を確認 { if (this.name == "" || this.county == "" || this.price == "") { alert("製品情報は空欄にできません!") 偽を返す } それ以外 { this.shopPings.push({ 名前: this.name, 国: この国、 価格: this.price, カウント: this.count, }) } this.name = "", this.countrty = "", this.price = "", this.count = "" this.dis = 偽 }, //商品を削除する del(index) { this.shopPings.splice(インデックス、1); }, //選択した項目を削除する delSelect() { this.shopPings = this.shopPings.filter((item) => { チェックされている場合 返品商品 } }) }, //すべて削除 alldel() { this.shopPings = [] }, //購入を減らすremove(data) { データ数 > 0 の場合 データ.count-- } (データ数 === 0)の場合{ データ.チェック済み = false } }, //購入を追加 add(data) { データ.count++ }, //製品xiu(i)を変更する{ this.int = i if (!this.dis1 == false) { this.dis1 = 偽 } それ以外 { this.dis1 = 真 } }, // 変更を確認する xiugai() { コンソールログ(this.int) インデックス = this.int とする console.log(this.name, this.price, this.count, ) this.shopPings[index].name = this.name this.shopPings[index].price = this.price this.shopPings[index].county = this.county this.shopPings[インデックス].count = this.count this.dis1 = 偽 }, //降順jiang() { this.shopPings.sort((a, b) => { // データに基づいて並べ替える return a.price - b.price; }) }, 検索() { if (!this.input_value) { アラートを返す('コンテンツを入力してください') } もし ( this.shopPings.every((v) => { v.name.indexOf(この入力値) == -1 }) ){ this.input_value = '' アラートを返す('そのような製品はありません') } this.shopPings = this.shopPings.filter((v) => { v.name.replace(this.input_value, this.input_value) v.name.indexOf(this.input_value) != -1 を返します }) } } } </スクリプト> 要約するこれで、vue を使用してショッピング カートのすべての機能を実装する方法についての説明は終了です。vue を使用してショッピング カートの機能を実装する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysql インストーラ コミュニティ 8.0.16.0 のインストールと構成のグラフィック チュートリアル
>>: Linux システムで .sh ファイルを実行する方法
目次関数定義方法関数呼び出し(6種類)これは問題を指摘している厳密モード高階関数閉鎖再帰: 自分自身...
JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...
パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
serializableシリアル化(問題なし)トランザクションは順次実行する必要があります。前のトラ...
1. ブロックレベル要素: 独立して存在できる能力を指します。通常、ブロックレベル要素は改行によって...
前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...
序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...
まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...
MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...
CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...