Vue.js实现购物车

最新推荐文章于 2024-07-04 20:48:19 发布

shuzhuang25

最新推荐文章于 2024-07-04 20:48:19 发布

阅读量564

点赞数

分类专栏： Vue.js 前端文章标签： Vue.js demo 购物车基础

本文链接：https://blog.csdn.net/qq_33429225/article/details/80233581

版权

这篇博客介绍了一个使用Vue.js实现的购物车示例，涵盖了基础模式，包括商品数量更改和删除功能。博主还增加了添加商品、选择功能（只计算选中商品的总价）以及利用localStorage进行数据持久化存储的增强功能。代码示例可在Github查看。

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

刚开始学习，所以只能写很简单的功能，但是还是可以学到很多东西

代码：Github

实现了购物车的简单模式
base中是基础模式，仅仅只有改变数量和删除
外部的代码做了一些改进：
1、增加了add功能，可以自己增加物品
2、增加了选择功能，总价只计算被选中的商品

3、增加了储存功能（localStroge)，使得可以持续保存数据

代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app" v-cloak>
    <div v-if="list.length" id="main">
        <table class="dataintable">
            <thead>