<!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>
