vue列表渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{ text-decoration: none; color: #999; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h1>新闻列表</h1> <!--<div class="newItem" v-for='item in newList'> 可以加上（item,index）获取索引值和每一项 --> <div class="newItem" v-for='(item,index) in newList'> <a :href=" 'https://www.toutiao.com' + item.source_url"> <h3>{{index+1}}、{{item.title}} </h3> <p>{{item.abstract}}</p> <img :src="item.image_url"/> </a> <hr /> </div> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ newList:[] }, methods:{ }, mounted:function(){ var that = this $.ajax({ type:"get", url:"newList.json", async:true, success:function(res){ console.log(res) that.newList = res.data } }); } }) </script> </body> </html>