lovecoding
/
Web1020


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!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>
        body {
            background-color: #f5f5f5;
        }

        .card-content {
            width: 250px;
            /* border:1px solid black; */
            float: left;
            padding: 20px;
            background-color: #fff;
            /* 阴影  第一个值横向偏移 第二个值纵向偏移 第三个值扩散值 第四个值阴影颜色 */
            box-shadow: 0 0 5px #666;
            margin:10px;
        }

        .card-img {
            text-align: center;
        }

        .card-img img {
            width: 200px;
        }

        .card-info h3,.card-info p{
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .title-bar{
            float: left;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="getData">获取数据</button>
        <div class="box clearfix">
            <div v-for="item in dataList" class="card-content">
                <div class="card-img">
                    <img v-bind:src="item.pic" alt="图片">
                </div>
                <div class="card-info">
                    <h3>{{item.prodName}}</h3>
                    <p>{{item.brief}}</p>
                    <p>¥{{item.price}}</p>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/ajax.js"></script>
    <script>
        // let oBox = document.getElementsByClassName("box")[0];
        // ajaxFun("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList", function (res) {
           
        // })
        let app = new Vue({
            el: "#app",
            data:{
                dataList:[]
            },
            methods:{
                getData:function(){
                    let that = this;
                    ajaxFun("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList", function (res) {
                        // console.log(res.data[0].productDtoList);
                        // console.log(that.dataList)
                        that.dataList = res.data[0].productDtoList
                    })
                }
            }
        })


    </script>
</body>

</html>