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

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

HTML ホームページ

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" href="/css/index.css" >
  
</head>
<本文>
  <div id="アプリ">
   <div v-if="本.length != 0">
    <テーブル>
      <頭>
        <tr>
          <番目></番目>
          <th>書籍名</th>
          <th>予定通り公開</th>
          <th>価格</th>
          <th>購入数量</th>
          <th>オペレーション</th>
        </tr>
      </thead>
      <t本文>
        <tr v-for="(item,index) 書籍内">
          <td>{{item.id}}</td>
          <td>{{アイテム名}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price | 表示価格}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td><button @click="removeHandle(index)">削除</button></td>
        
        </tr>
      </tbody>
    </テーブル>
    <h2>合計金額: {{totalPrice | showPrice}}</h2>
   </div>
   <h2 v-else>ショッピングカートは空です</h2>
  </div>
 
  <script src="/js/vue.js"></script>
  <script src="/js/index.js"></script>
</本文>
</html>

CSSコード

* {
  マージン: 0;
  パディング: 0;
}
テーブル {
  マージン: 100px 0 0 100px;
  境界線: 1px 実線 #e9e9e9;
  境界線の折りたたみ: 折りたたみ;
  境界線の間隔: 0;
}
 
番目、
td {
  パディング: 8px 16px;
  境界線: 1px 実線 #e9e9e9;
  テキスト配置: 左;
}
 
番目 {
  背景色: #f7f7f7;
  色: 黒;
  フォントの太さ: 6000 ;
}
 
h2 {
  幅: 500ピクセル;
  左マージン: 100px;
}
 
ボタン {
  パディング: 5px;
}

js コード (Vue)

constアプリ = 新しいVue({
  el:"#アプリ",
  データ：{
    書籍:
      {
        id:1,
        名前:「アルゴリズム入門」
        日付:'2019-2'、
        価格:85.00、
        カウント:1
      },
      {
        id:2,
        名前:「コンピュータの基礎」
        日付:'2019-2'、
        価格:95.00、
        カウント:1
      },
      {
        id:3,
        名前:'C++ 上級言語'、
        日付:'2019-2'、
        価格:89.00、
        カウント:1
      },
      {
        id:4,
        名前:'《コンパイル原則》',
        日付:'2019-2'、
        価格:77.00、
        カウント:1
      },
    ]
   
  },
  方法:{
    減算(インデックス){
      this.books[index].count--
    },
    増分(インデックス){
      this.books[インデックス].count++
    },
    ハンドルを削除します(インデックス){
      this.books.splice(インデックス,1)
    }
  },
 
  計算:{
    合計価格(){
      最終価格を 0 にする
      for(let i = 0; i < this.books.length; i++){
        最終価格 += this.books[i].price * this.books[i].count
      }
      最終価格を返す
    }
  },
 
  フィルター:
    価格を表示(価格){
      '￥' + price.toFixed(2) を返す
    }
  }
})

運用結果