今回は、Vuejsでショッピングカート機能を実装する方法を説明します。Vuejsでショッピングカート機能を実装する際の注意事項は次のとおりです。
フロントエンドフレームワークVue.JS関連のブログ更新を開始します。
機能の概要
Vue.JS の基本的な知識をいくつか学び、命令と データ バインディング に関するこれらの基本的な知識を使用して、簡単なショッピング カート機能を開発します。機能のポイントは以下の通りです:
(1) 商品の名前、単価、数量を表示します。
(2) 商品の数量を増減できます。
(3) 商品の合計金額を表示します。ショッピング カートはリアルタイムで更新する必要があります。つまり、数量が変更されると、合計価格も変更されます。
(4) 商品をショッピング カートから削除できます。
(5) 選択機能があります。選択した製品の合計価格のみを計算します。
コード
コードは HTML、JS、CSS の 3 つの部分に分かれています。鍵となるのはHTMLとJSです。
HTML
えーJS
りぃ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 サイトの他の関連記事を参照してください。