lovecoding
/
W250511


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
        }

        .goods-card {
            width: 234px;
            box-shadow: 0 0 5px gray;
            padding-bottom: 30px;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .goods-pic img {
            width: 234px;
        }

        .goods-title,
        .goods-info,
        .goods-price {
            padding: 0 10px;
        }

        .goods-title {
            color: #333;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            margin-bottom: 2px;
        }

        .goods-info {
            font-size: 12px;
            color: #b0b0b0;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            margin-bottom: 10px;
        }

        .goods-price {
            text-align: center;
        }

        .goods-price span {
            color: #ff6700;
            font-size: 14px;
            font-weight: 400;
        }

        .goods-price del {
            color: #b0b0b0;
            font-size: 14px;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="getData">获取商品列表</button>
        <div class="box">
            <div class="goods-card" v-for="item in productDtoList">
                <div class="goods-pic">
                    <img v-bind:src="item.pic" alt="phone">
                </div>
                <div class="goods-title">
                    <span>{{item.prodName}}</span>
                </div>
                <div class="goods-info">
                    {{item.brief}}
                </div>
                <div class="goods-price">
                    <span>¥{{item.price}}</span>

                </div>
            </div>
        </div>
    </div>


    <script>
        new Vue({
            // 绑定Vue实例到id为app的元素 (挂载点)
            el: "#app",
            // data属性用于存储页面中要显示的数据
            data: {
                productDtoList: [],
                num:0,
                str:"hello world!",
            },
            methods: {
                getData() {
                    // 定义that指向vue实例
                    let that = this;
                    // 第一个步创建XMLHttpRequest对象
                    let xhr = new XMLHttpRequest();
                    // 第二个步调用open方法配置请求信息
                    xhr.open("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList");
                    // 第三步发送请求
                    xhr.send();
                    // 第四步监听响应
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            let jsonStr = xhr.responseText;
                            // 服务端返回的数据为JSON字符串
                            // 把JSON字符串转换为对象
                            let obj = JSON.parse(jsonStr);
                            // 将获取到的值放到data中
                            that.productDtoList = obj.data[0].productDtoList
                        }
                    }
                }
            }
        });

    </script>
</body>

</html>