Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は次のとおりです。

まずは完成した効果を見てみましょう。

CSS部分

ここでは特に言うことはありません。Vクロークの知識ポイントだけです。

テーブル{
  境界線: 1px 実線 #e9e9e9;
  境界線の折りたたみ: 折りたたみ;
  境界線の間隔: 0;
}
th、td{
  パディング: 8px 16px;
  境界線: 1px 実線 #e9e9e9;
  テキスト配置: 中央;
}
th{
  背景色: #f7f7f7;
  色: #5c6b77;
  フォントの太さ: 600;
}
[v-マント]{
  表示: なし;
}

HTML部分

使用される Vue の知識ポイントをいくつか示します。

v-if
v-for
Vクローク
v-on > @
v-bind > :
方法
計算された
フィルター

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ショッピングカート</title>
  <link rel="スタイルシート" href="style.css" >
</head>
<本文>
  
  <div id="app" v-cloak>
    <div v-if="本の長さ">
      <テーブル>
        <頭>
          <tr>
            <番目></番目>
            <th>書籍名</th>
            <th>発行日</th>
            <th>価格</th>
            <th>購入数量</th>
            <th>削除</th>
          </tr>
        </thead>
        <t本文>
          <tr v-for="(item,index) 書籍内">
            <th>{{item.id}}</th>
            <th>{{アイテム名}}</th>
            <th>{{item.date}}</th>
            <!--ソリューション 1 では小数点と通貨記号が保持されます-->
            <!-- <th>{{"￥"+item.price.toFixed(2)}}</th> -->
            <!--解決策 2-->
            <!-- <th>{{getFinalPrice(item.price)}}</th> -->
            <!--スキーム 3-->
            <th>{{item.price | 表示価格}}</th>
            <番目>
              <button @click="decrement(index)" :disabled="item.count<=0">-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </th>
            <th><button @click="removeHandle(index)">削除</button></th>
          </tr>
        </tbody>
      </テーブル>
      <h2>合計価格:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>
      ショッピングカートは空です</h2>
  </div>

</本文>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</html>

JS部分

constアプリ = 新しいVue({
  el:"#アプリ",
  データ：{
    書籍:
      {
        id:1,
        名前:"アルゴリズム入門",
        日付:'2006-9'、
        価格:85.00、
        カウント:1
      },
      {
        id:2,
        名前:"UNIXプログラミングの芸術",
        日付:'2006-2',
        価格:50.00、
        カウント:1
      },
      {
        id:3,
        名前:"プログラミングの芸術",
        日付:'2008-10'、
        価格:39.00、
        カウント:1
      },
      {
        id:4,
        名前:"《コード百科事典》",
        日付:'2006-3',
        価格:128.00、
        カウント:1
      },
      
    ]
  },
  メソッド: {
   //ここでは、メソッド形式を使用して合計価格を計算することをあきらめ、より効率的な計算プロパティを代わりに使用します。
    // getFinalPrice(価格){
    // "￥"+price.toFixed(2) を返す
    // },
    増分(インデックス){
      this.books[インデックス].count++
    },
    減算(インデックス){
      this.books[index].count--
    },
    ハンドルを削除します(インデックス){
      this.books.splice(インデックス、1);
    }

  },
  計算: {
    合計価格(){
      // オプション 1: 通常の for ループ // let totalPrice = 0;
      // for(let i=0;i<this.books.length;i++){
      // 合計価格 += this.books[i].price * this.books[i].count
      // }
      // 合計価格を返す

      // 解決策 2: for in
      // totalPrice を 0 とします。
      // for(let i in this.books){
      // // コンソール.log(i);//1 2 3 4
      // 合計価格 += this.books[i].price * this.books[i].count
      // }
      // 合計価格を返す

      // オプション 3: for の
      // totalPrice を 0 とします。
      // for(let item of this.books){
      // // console.log(item);//ここで取得するのは配列内の各オブジェクトです// totalPrice += item.price * item.count
      // }
      // 合計価格を返す

      // 解決策4: 削減
      this.books.reduce(function (preValue, book) を返す {
        // console.log(book); // それぞれ 4 つのオブジェクトを出力します。 return preValue + book.price * book.count
      }, 0)
    }
  },
  // フィルター:{
    価格を表示(価格){
      "￥"+price.toFixed(2)を返す
    }
  }
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: