ホームページ > 記事 > ウェブフロントエンド > Vuejsでショッピングカート機能を実装する方法
Vuejsでショッピングカート機能を実装する方法
- php中世界最好的语言オリジナル
- 2018-05-24 09:20:213308ブラウズ
今回は、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。