获取地址串信息：某些公司会提供一些地址串的接口，可以通过vue框架使用axios获取里面的值，并循环遍历
参考代码：
<!DOCTYPE html><html><head> <title>demo5 社区作业1</title> <meta charset="UTF-8"> <!--导包--> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script></head><body> <div id="demo1"> <table> <!--{{msg}}可以打印看看是否拿到值--> <!--通过v-for方法，可以把msg的值赋值给item进行遍历--> <tr v-for="item in msg"> <td>{{item.title}}</td> <td>{{item.last_reply_at}}></td> <td>{{item.desc}}</td> </tr> </table> </div></body><script> var vm = new Vue({ //绑定div el:"#demo1", data:{ //声明属性 msg:[] },methods:{ //seach方法 seach:function(){ //通过axios,get方法获取地址的信息 axios.get("https://cnodejs.org/api/v1/topics").then( res=>{ //可以打印一下获取到的信息，看下是怎么样的结构 console.log(res.data.data); //把需要的参数赋值给之前声明的Msg this.msg=res.data.data; } ).catch( //错误异常 err=>{ this.msg=err.status; } ) } },mounted:function (){ //mounted是声明周期，在声明周期中执行方法 this.seach() } });</script></html>其他案例网易接口： <!DOCTYPE html><html><head> <title>demo7 网易留言</title> <meta charset="UTF-8"> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script></head><body> <div id="demo1"> <!--{{msg}}}--> <table> <tr v-for="item in msg"> <td>{{item.commentTxt}}</td> <td>{{item.createAt}}</td> </tr> </table> </div></body><script> var vm = new Vue({ el:"#demo1", data:{ msg:[] }, methods:{ seach:function(){ axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187") .then( res=>{ //commentList是里面包装的一个集合名字，获取值之前先打印看看信息 this.msg=res.data.data.commentList; console.log(res.data); } ).catch( err=>{ this.mag=err.status; } ) } }, mounted:function () { this.seach(); } });</script></html>