<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .colu{ width: 100%; list-style: none; padding: 0; } .coli{ width: 100%; height: 50px; border-bottom: 1px solid #888888; padding: 0; line-height: 50px; } .cold1{ width: 96%; margin: 0 auto; } .cold2{ width: 100%; height: 50px; left: 50px; border-radius: 3px; background-color: #e3e3e3; line-height: 50px; } .colp1{ text-indent: 12px; width: 55%; float: left; margin: 0; } .colp2{ width: ; float: left; margin: 0; text-align: center; width: 15%; } </style> </head> <body> <div class="cold1" id="celect"> <ul class="colu"> <div class="cold2"> <p class="colp1">电影名称</p> <p class="colp2">电影评分</p> <p class="colp2">电影分类</p> <p class="colp2">收藏时间</p> </div> <li class="coli" v-for="c,index in clects"> <p class="colp1">{{c.movieName}}</p> <p class="colp2">{{c.fen}}<span>分</span></p> <p class="colp2">{{c.addr}}</p> <p class="colp2">{{c.time.substring(0,10)}}</p> </li> <li class="coli"></li> </ul> </div> </body> <script type="text/javascript" src="static/js/vue.js"></script> <script type="text/javascript" src="static/js/axios.min.js"></script> <script type="text/javascript" src="static/js/base.js"></script> <script type="text/javascript" src="static/js/cookie_utils.js"></script> <script > var burl=Baseurl+"/person/clect"; var vm=new Vue({ el:"#celect", data:{ clects:[] }, created() { var token=getCookieValue("token"); axios({ method:"get", url:burl, headers:{ //设置请求头 token:token } }).then((res)=>{ var vo=res.data; if(vo.code==10001){ vm.clects=vo.data; }else{ alert("暂时还未收藏"); } }); } }) </script> </html>