模拟——获取数据

平平无奇小码手

已于 2023-08-26 15:08:47 修改

阅读量84

点赞数

文章标签： javascript html css

于 2023-04-23 16:47:01 首次发布

本文链接：https://blog.csdn.net/qq_51173747/article/details/130325329

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

<style>
    table{
        border:1px solid #000;
        border-collapse: collapse;
        width: 550px;
    }
    th{
        height: 30px;
        text-align: center;
        vertical-align: middle;
        border:1px solid #000;
    }
    td{
        height: 100px;
        text-align: center;
        vertical-align: middle;
        border:1px solid #000;
    }
    img{
        height: 100px;
        width: 100px;
    }
    a{
        color:#00ff00;
    }
    a:hover{
        color:#ff0000;
    }
    tr th:nth-child(4){
        background-color: #ffffd0;
    }
    tr td:nth-child(4){
        background-color: #ffffd0;
    }
    tr th:nth-child(1){
        width: 100px;
    }
    tr th:nth-child(2){
        width: 150px;
    }
    tr th:nth-child(3){
        width: 150px;
    }
    
</style>
<body>
    <div id="info">
        <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
        <div id="product">
            <table>
                <tr>
                    <th></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </tr>
                <tr v-for="item in list">
                    <td><img :src="'http://114.67.241.121:8080/img/'+item.image">
                    </td>
                    <td>{{item.brand}}</td>
                    <td><a href="'http://114.67.241.121:8080/img/'+item.image">{{item.model}}</a></td>
                    <td>{{item.price}}</td>
                </tr>
            </table>
            
        </div>
    </div>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#info',
        data(){
            return {
                list:[],
            }
        },
        created(){
            axios({
                method:'get',
                url:'http://114.67.241.121:8080/product/list'
            }).then(res=>{
                this.list=res.data.data
            })
        }
    })
</script>
</html>

https://c.binjie.fun/#/chat/1693031421192c