实现购物车功能

dragon_李

已于 2022-10-15 23:12:14 修改

阅读量392

点赞数

文章标签： vue.js javascript 前端

于 2022-10-14 21:41:59 首次发布

本文链接：https://blog.csdn.net/lzqxz_/article/details/127323965

版权

本文详细介绍了如何使用Vue.js和Vuex来实现购物车功能，包括自动计算总金额、删除商品、更改商品数量以及按名称排序等关键操作。

摘要由CSDN通过智能技术生成

一、使用vue实现

二、使用Vuex实现

要求：

自动计算总金额（必须）
能删除已选择产品
能更改数量
能按产品名称排序

一、使用vue实现

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现购物车功能</title>
    <script src="./js/vue.js"></script>
    <script src="./js/vuex.js"></script>
</head>
 
<body>
    <div id="app">
        <table border="1" cellpadding="10" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        Name&nbsp;&nbsp;<button @click="byNameSort()">{
  {sortName}}</button>
                    </th>
                    <th>Type</th>
                    <th>Quantity</th>
                    <th>(Standard)Price(USD)</th>
                    <th>Sub-total(USD)</th>
                    <th>Option</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goods" :key="item.id">
                    <td>{
  {item.name}}</td>
                    <td>{
  {item.category}}</td>
                    <td align="center">
                        <button @click="desc(item)">-</button>
                        {
  {item.qty}}
                        <button @click="incr(item)">+</button>
                    </td>
                    <td align="right">{
  {item.price}}</td>
                    <td align="right">{
  {item.price * item.qty}}</td>
                    <td>
                        <button @click="del(index)">delete</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="right">Total</td>