[ { "name": "（山上双人标准间）黄山经典二日游（魅力黄山，日出云海，人间仙境，春暖花开）", "day": 2, "night": 1, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/a9836502.jpg", "review_num": 2, "unit_price": 0 }, { "name": "0购物+三环内接！郑州—焦作云台山二日游，含1晚住宿+1早2正餐，无强制消费", "day": 2, "night": 1, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/3a82e902.jpg", "review_num": 1, "unit_price": 329 }, { "name": "岛内酒店上门接>厦门至泉州开元寺+南少林+洛阳桥+西街+天后宫一日游", "day": 1, "night": 0, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/f8106f02.jpg", "review_num": 2, "unit_price": 0 }, { "name": "南宁✈西安兵马俑华清池延安黄帝陵壶口瀑布城墙5日/耳麦自助餐/0购物/接送机", "day": 5, "night": 4, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/93835fbb.jpg", "review_num": 1, "unit_price": 3045 }, { "name": "北京+天津纯玩6日游/餐餐特色/连锁酒店/专车专导/故宫/瓷房子赠升国旗", "day": 6, "night": 5, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/0f.water.jpg", "review_num": 1, "unit_price": 0 }, { "name": "住蒙古包>内蒙古希拉穆仁草原+响沙湾沙漠+成吉思汗陵+呼和浩特市内双飞五日游", "day": 5, "night": 4, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/4b806602.jpg", "review_num": 1, "unit_price": 0 }, { "name": "北京全景高端五星游丨餐餐特色&0购物0自费&24H接送&赠德云社+人民大会堂", "day": 5, "night": 4, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/ca841f56.jpg", "review_num": 1, "unit_price": 0 }, { "name": "机票+含餐>西安兵马俑/华清池/骊山/西岳华山/延安/黄帝陵/壶口瀑布6日", "day": 6, "night": 5, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/93835fbb.jpg", "review_num": 1, "unit_price": 2740 }, { "name": "高铁/动车往返>宁波—温州雁荡山2日游 净名谷+灵岩景区+大龙湫 赏灵峰夜景", "day": 2, "night": 1, "favorites": 0, "score_avg": 4, "photo_url": "/media/images/scenic/7565abdd.jpg", "review_num": 1, "unit_price": 0 } ]
通过vue去请求这个api，并将数据遍历，生成多个div块模板，并渲染数据，效果图如下：
api 返回json中有9条记录，所以对应应该生成9个上图的div块，开始动手：
首先，在html页面上引入js
<script type="text/javascript" src="{% static 'js/vue.js' %}"></script> <script type="text/javascript" src="{% static 'js/axios.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/common.js' %}"></script> <script> $(document).ready(function () { getHotScheme(); 1. 在dom加载完之后执行getHotScheme函数 }); </script>
要用到vue就少不vue.js,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
我们将上面功能的实现写在common.js的getHotScheme中
相关html如下：
<div> <div> <template v-for="schemeInfo in schemesInfo"> <div> <div> <a href="https://www.jb51.net/detail-page.html" > <div> <img :src="schemeInfo.photo_url" alt="Tour Package"/> <div> <div><span>{{ schemeInfo.day }} 天 {{ schemeInfo.night }} 夜</span></div> </div> </div> <div> <h5>{{ schemeInfo.name }}</h5> <div> <div> <div v-bind:data-rating-score="schemeInfo.score_avg"></div> <span> / {{ schemeInfo.review_num }} 评论</span> </div> </div> <div> <span><i></i></span> <div>￥{{ schemeInfo.unit_price }}</div> </div> </div> </a> </div> </div> </template> </div> </div>
js：getHotScheme
function getHotScheme(){ new Vue({ el: '#scheme_app', data () { return { schemesInfo: null } }, mounted () { axios .get('/info/schemes') .then(response => (this.schemesInfo = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) }
解释一下：
getHotScheme()在DOM加载后执行，其中创建了vue对象，el表示vue的作用范围，它被绑定到了html中的id为scheme_app的div，data中我们需要使用schemesInfo,初始为null，当axios请求成功之后，schemesInfo的值为api的返回的json
在html中：
我们要遍历schemesInfo数据，在需要重复生成的div块外添加 template ，<template v-for="schemeInfo in schemesInfo">````````</template>