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

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

コード：

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
</head>

<本文>
  <div id="アプリ">
    <テーブル>
      <頭>
        <tr>
          <番目></番目>
          <th>書籍名</th>
          <th>発行日</th>
          <th>価格</th>
          <th>購入数量</th>
          <th>オペレーション</th>

        </tr>
      </thead>
      <t本文>
        <tr v-for='(item,index) 書籍内' ::key="item">
          <td>{{item.id}}</td>
          <td>{{アイテム名}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price*item.count | 最終価格を取得する}}</td>
          <td>
            <button @click='reduce(index)' :disabled='item.count <= 1'>-</button>
            {{item.count}}
            <button @click='add(index)'>+</button>

          </td>
          <td>
            <button @click='removeBtn(index)'>削除</button>
          </td>
        </tr>
      </tbody>
    </テーブル>
    <h2 v-if='books!=""'>合計金額:{{theSumOf | getFinalPrice}}</h2>
    <h2 v-else>ショッピングカートは空です</h2>
  </div>
</本文>
<script src="../js/vue.min.js"></script>
<スクリプト>
  var アプリ = 新しい Vue({
    el: '#app',
    データ： {
      書籍:
        {
          id: 1,
          名前:「コンピュータアプリケーション」
          日付: '2006-9'、
          価格: 85.00、
          カウント: 1

        },
        {
          id: 2,
          名前: 'Javaアプリケーション'、
          日付: '2006-9'、
          価格: 10.00、
          カウント: 1

        },
        {
          id: 3,
          名前:「ビッグデータ」
          日付: '2006-9'、
          価格: 85.00、
          カウント: 1

        },
        {
          id: 4,
          名前: 'UIデザイナー'、
          日付: '2006-9'、
          価格: 85.00、
          カウント: 1

        },
      ]、
      追加:0

    },
    メソッド: {
      追加(インデックス) {
        this.books[インデックス].count++

      },
      減らす(インデックス) {
     
        this.books[index].count--
    
      },
      削除ボタン(インデックス) {
        this.books.splice(インデックス、1)

      }
    },
    コンポーネント:

    },
    計算: {

  
      合計: 関数 () {
      //累積計算の最初の方法 //let sum = 0
        //this.books.forEach(item => {
        // 合計 += parseInt(item.price)*parseInt(item.count)
        });
        //合計を返す

 //累積計算の2番目の方法 //let sum = 0
 //for(let i in this.books){
  //合計 += this.books[i].price*this.books[i]*count
 }
 //合計を返す

 //累積計算の3番目の方法 //let sum = 0
 //for(let item of this.books){
 //合計 += アイテム.価格*アイテム.個数
 //
 //合計を返す

 //累積計算の4番目の方法 return this.books.reduce(function(preValue,book){
 preValue + book.price*book.count を返す
 },0)
      }

    },
    フィルター:
      getFinalPrice(価格) {
        '￥' + price.toFixed(2) を返す
      },
    }
  });
</スクリプト>

<html>

vue.js の学習チュートリアルについては、特別トピックの vue.js コンポーネント学習チュートリアルと Vue.js フロントエンドコンポーネント学習チュートリアルをクリックして学習してください。

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

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