Vuejsでショッピングカート機能を実装する方法-jsチュートリアル-php.cn

Vuejsでショッピングカート機能を実装する方法

php中世界最好的语言

リリース： 2018-05-24 09:20:21

オリジナル

3360 人が閲覧しました

今回は、Vuejsでショッピングカート機能を実装する方法を説明します。Vuejsでショッピングカート機能を実装する際の注意事項は次のとおりです。

フロントエンドフレームワークVue.JS関連のブログ更新を開始します。

機能の概要

Vue.JS の基本的な知識をいくつか学び、命令とデータバインディングに関するこれらの基本的な知識を使用して、簡単なショッピングカート機能を開発します。機能のポイントは以下の通りです:
(1) 商品の名前、単価、数量を表示します。
(2) 商品の数量を増減できます。
(3) 商品の合計金額を表示します。ショッピングカートはリアルタイムで更新する必要があります。つまり、数量が変更されると、合計価格も変更されます。
(4) 商品をショッピングカートから削除できます。
(5) 選択機能があります。選択した製品の合計価格のみを計算します。

コード

コードは HTML、JS、CSS の 3 つの部分に分かれています。鍵となるのはHTMLとJSです。

HTML

えー

りぃ

CSS

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Vue 购物车</title>
  <script src="../js/vue.min.js"></script>
  <link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
  <p id="app" v-cloak>
   <template v-if="list.length">
    <table>
     <thead>
      <tr>
       <th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
       <th>商品名称</th>
       <th>商品单价</th>
       <th>商品数量</th>
       <th>操作</th>
      </tr>      
     </thead>
     <tbody>
      <tr v-for="(item,index) in list">
       <td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></td>
       <td>{{ item.name }}</td>
       <td>{{ item.price }}</td>
       <td>
        <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
        {{ item.count }}
        <button @click="handleAdd(index)">+</button>
       </td>
       <td><button @click="handleRemove(index)">移除</button></td>
      </tr>
     </tbody>
    </table>
    <p>总价：￥ {{ totalPrice }}</p>
   </template>
   <p v-else>购物车为空！</p>
  </p>
  <script src="../js/cart.js"></script>
 </body>
</html>

ログイン後にコピー

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

以上がVuejsでショッピングカート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。