首页 > 其他 > 详细

vue列表渲染

时间:2018-11-22 10:25:07      阅读:132      评论:0      收藏:0      [点我收藏+]
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列表渲染

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!