使用Vue实现简单购物车

最新推荐文章于 2024-06-13 07:27:27 发布

浮华皆梦

最新推荐文章于 2024-06-13 07:27:27 发布

阅读量5.5k

点赞数 18

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_26597143/article/details/118191280

版权

实战：购物车

新手程序员最容易犯的错误就是拿到需求不管三七二十一，直接开搞。在开始写代码之前，理清思路，分析需求是十分重要的，一来可以提高书写代码的效率，二来可以避免错误带来的返工。

现在来看下购物车都需要实现哪些功能：

可以展示商品列表，每一条商品记录包含商品名称、商品单价、购买数量和操作。
可以对每个商品的数量进行增加和减少
可以删除商品
可以对商品的总价进行计算。

效果如下：
在这里插入图片描述

好，整理完需求之后，我们就可以着手写代码了。

首先咱们先把整体的HTML结构搭建出来，毕竟HTML是网页的骨架，没有骨架，css和js也就没有依附。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单购物车</title>
    <!-- 将css代码写在外链的css文件中 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
    
<body>
    <div id="app">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        
    </script>
</body>

</html>

接下来,创建vue实例对象

let app = new Vue({
   
    el:"#app",
    //存放数据
    data:{
   

    },
    //计算属性
    computed:{
   

    },
    //方法
    methods:{
   

    }
})

数据正常情况下，应该是从后端服务器获取的，不过现在我们做小案例，我们现在手动创建一些数据出来。我们需要的数据也非常简单，只需要商品的id，名称，单价和数量即可。注意，这里的id必须是唯一的。

data:{
   
    list:[
        {
   
            id:1,
            name:"小米12",
            price:3999,
            count:1
        },
        {
   
            id:2,
            name:"oppo",
            price:4999,
            count:1
        },
        {
   
            id:3,
            name:"HUAWEI mate 40",
            price:5399,
            count:1
        },
        {
   
            id:4,
            name:"iPhone 12",
            price:6999,
            count:1
        },
    ]
}

有了数据之后，我们就可以在页面上进行展示了。

<div id="app">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>商品名称</th>

最低0.47元/天解锁文章

浮华皆梦

关注

18
点赞
踩
108

收藏

觉得还不错? 一键收藏
0
评论
使用Vue实现简单购物车

实战：购物车新手程序员最容易犯的错误就是拿到需求不管三七二十一，直接开搞。在开始写代码之前，理清思路，分析需求是十分重要的，一来可以提高书写代码的效率，二来可以避免错误带来的返工。现在来看下购物车都需要实现哪些功能：可以展示商品列表，每一条商品记录包含商品名称、商品单价、购买数量和操作。可以对每个商品的数量进行增加和减少可以删除商品可以对商品的总价进行计算。效果如下：好，整理完需求之后，我们就可以着手写代码了。首先咱们先把整体的HTML结构搭建出来，毕竟HTML是网页的骨架，没有骨架
复制链接

扫一扫