首页
   /       /   
蓝桥杯(web组)题解-购物车
3月
11
蓝桥杯(web组)题解-购物车
作者:大彭Sir    分类: 学习笔记

背景介绍

购物车是商城类应用里必不可少的功能,接下来,我们将使用 vue 实现一个购物车列表。

考试要求

在代码中需要修改的部分有相关提示,请仔细阅读,然后完善 index.html 中的 js 部分代码,请求数据,并让数据正确显示到页面上,完成后效果如下:(在自己电脑上图片可能不显示)

题目分析

就是使用axios请求下数据,再用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/axios.js"></script>
    <link rel="stylesheet" href="./css/element-ui.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container" id="app">
        <h4>购物车</h4>
        <!-- 购物车列表 -->
        <div>
            <el-card class="box-card" v-for="al in carlist">
                <!-- 商品图片 -->
                <img :url="al.img">
                <div>

                    <span>
                        <!-- 商品名称 -->
                        {{al.name}}
                    </span>
                    <div class="bottom clearfix">
                        <el-button type="text" class="button">+</el-button>
                        <el-button type="text" class="button">
                            <!-- 商品数量 -->
                            {{al.num}}
                        </el-button>
                        <el-button type="text" class="button">-</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
    </div>

    <!-- 引入组件库 -->
    <script src="./js/element-ui.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },
            created() {
                // 在这里使用axios 发送请求
                axios.get(`carList.json`, {}).then((ret) => {
                    this.carlist = ret.data
                })
            },
        })
    </script>
</body>

</html>
本文标签:标签: VUE axios
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录