1 HelloWrold.vue , create()开始,自动读取axios的内容, 循环读取到ul里面。
<template> <div class="hello"> <ul class="box"> <li v-for="n in list"> <el-popover placement="top-start" width="200" trigger="hover" :content="n.content"> <el-button slot="reference" > {{n.message}} </el-button> </el-popover> </li> </ul> </div> </template> <script> export default { data(){ return { list:[] } }, created:function(){ this.fetchData(); }, methods:{ fetchData(){ var _this = this; this.$axios.get("http://localhost:8888/hello1").then(res=>{ _this.list = eval('(' + res.data + ')'); }); } } } </script> <style scoped> .box{ float: left; text-align: center; } </style>
2 后端传送内容
return "[{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}," + "{'title':'10', 'content':'2', 'size':'medium', 'message':'abc'}]";