码迷,mamicode.com
首页 > 其他好文 > 详细

vue列表渲染

时间:2018-11-22 10:44:54      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:new   utf-8   on()   新闻   mount   oct   ajax   body   eth   

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>

 

vue列表渲染

标签:new   utf-8   on()   新闻   mount   oct   ajax   body   eth   

原文地址:https://www.cnblogs.com/wwthuanyu/p/9999367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!