有如下界面：

http://127 . 0 . 0 . 1:8000/信息/方案/

返回json数据：

[{ '姓名' : '(山中双人房)黄山经典两日游(迷人黄山，日出云海，人间仙境，春暖花开)'，'日' : 2，'夜' : 1，'收藏夹' 3360 0，' score _ avg' :photo _ URL ' : '/媒体/图片/景区/a9836502.jpg '，' review _ num' : 2，' unit _ price' : 0 0}，{'name' :' 0购物三环互联！从郑州到焦作云台山两天游，包括1晚住宿、1早2餐，不强制消费'，' Day' : 2，' Night' : 1，' Favorites ' 3360 0 0，' Score _ AVG' : 4，' photo _ URL ' : '/media/images/signature/3a 82e 902 . jpg '，' review_num': 1，' unit_price': 329 '，{ ' name ' : ' { '姓名' : '南宁Xi西安兵马俑华清池第五天，延安黄帝陵壶口瀑布/耳机自助餐/0购物/接送'，'日' : 5，'夜' : 4，'收藏夹' 3360 0，' score _ avg' : 4，' photo _ URL ' : '/媒体/图片/景区/93835fbb.jpg '，' review_num': 1，'单位review_num': 1，'单价' : 0 }，{ '名称' : '呼和浩特双飞五日游，成吉思汗陵，内蒙古响沙湾沙漠'，'日' : 5，'夜' : 4，'收藏夹' 3360 0 0，' Score _ AVG' : 4，' photo _ URL ' : '/媒体/图片/景区/4b806602.jpg '，' review_num review_num': 1，' unit_price': 0 }，{'name': '该机票涵盖6天，适用于Xi '兵马俑/华清池/骊山/西岳华山/延安/黄帝陵/壶口瀑布'，' Day' : 6，' Night' : 5，' Favorites' 3360，' Score _ AVG ' ' photo _ URL ' : '/media/images/景区/93835fbb。 photo _ URL ' : '/media/images/scenetic/7565 addd . jpg '，' review _ num' : 1，' unit _ price' : 0}]通过vue请求此api，遍历数据，生成多个div块模板，并呈现数据。 效果图如下：

api返回的json中有9条记录，因此上面的9个div块应该相应生成，并开始：

首先，在html页面中引入js

脚本类型=' text/JavaScript ' src=' http : { % static ' js/vue . js ' % } '/script script type=' text/JavaScript ' src=' http : { % static ' js/axios . min . js ' % } '/script script type=' text/JavaScript ' src=' http : { % static ' js/common . js ' % } '/script script $(文档)。ready(function(){ getHotScheme()；1.加载dom后执行getHotScheme函数})；/脚本需要vue。js和vue的2.0版本。js建议axios完成ajax请求。

我们在common.js的getHotScheme中编写了上述函数的实现

相关的html如下：

div class=' GridLex-gap-30-包装-网格-项目-包装' div class=' GridLex-网格-nogate-equalHeight '模板v-for=' scheme sinfo ' div class=' GridLex-col-4 _ sm-6 _ xs-12mb-30 ' div class=' Package-grid-grid-item ' a href=' detail-page。html ' rel='外部无跟随' div class=' image ' img :s RC=' http : scheme inheight天{{ schemeInfo.night }}夜/span/div/div/class=' content clear fix ' H5 { { scheme info。名称} }/H5分类=' raty-wrapper '分类=' raty-wrapper '分类='星级-只读v-bind :数据-评级-评分='方案信息。score _ avg '/div span/{ {方案信息。review _ num }评论/span/div/div class='绝对内容' span class=' BTN ' I class=' fa-heart-o '/I/span div class='价格'{ { scheme info。unit _ price } }/div/div/a/div/div/template/div/div js:getHotScheme

函数getHotScheme(){ new Vue({ El : ' # scheme _ app '，data(){ return { scheme sinfo : null } }，mounted () { axios .get('/info/schemes ').然后(回应=(这个。方案sinfo=响应。数据).捕捉(函数（错误){ //请求失败处理console.log(错误);});} })}解释一下：

getHotScheme()在数字正射影像图加载后执行，其中创建了某视频剪辑软件对象，el表示某视频剪辑软件的作用范围，它被绑定到了超文本标记语言中的编号为scheme_app的数据区中我们需要使用schemesInfo，初始为null，当爱可信请求成功之后，schemesInfo的值为美国石油学会(美国石油协会)的返回的数据

在超文本标记语言中：

我们要遍历schemesInfo数据，在需要重复生成的差异块外添加模板，模板v-for=' scheme sinfo '中的scheme info ` ` ` ` `/模板

被模板标签包含的内容将被生成多份，文本部分通过{{}}取数据进行渲染，但是在标签属性中使用数据需要做出修改：比如图片标签，指定科学研究委员会时不应该使用img SCR=' ' { { scheme info。photo _ URL } }“”这将是无效的，应该改为img : src=' Http :方案信息。照片_网址' src前面的：时垂直装订的简写，用于属性绑定，当然，你也可以写完整，如星级评定-只读v-bind :数据-评级-评分='方案信息。score _ avg '/div

现在看似已经完成了，但是实际上我们的数据并没有被渲染到模板上，这是因为某视频剪辑软件取值的方法{{ }}与框架的模板语言冲突，vue取值并未生效，其实解决办法至少有三个，可以参考：https://www .JB 51。net/article/164779。html文件的后缀

我还是喜欢第三种：

将某视频剪辑软件相关的超文本标记语言代码块禁用框架模板：

在上述超文本标记语言代码前添加{%逐字%},尾部添加{ %逐字%},这样某视频剪辑软件就可以生效了，

但是还有一个问题

没有被显示出来，原因是类属性为星级-只读的差异的射流研究…函数需要在数据完成之后加载才能生效

正好，Vue.js有一个方法看着，它可以用来监测某视频剪辑软件实例上的数据变动。

我们要监听schemesInfo，如果数据变化，说明某视频剪辑软件开始渲染，渲染完成数字正射影像图将发生变化，在某视频剪辑软件中有个Vue .$nextTick(回调),当数字正射影像图发生变化，更新后执行的回调。

在这个回调函数中执行星级-只读对应的射流研究…函数应该就可以解决这个问题，试一下修改common.js中的代码：

函数loadGrade(){ $(' .星级-只读')。raty({ readOnly: true，round: {down:2，full:6，up:8}，half: true，space: false，score : function(){ return $(this)).attr('数据评级分数');} });}函数getHotScheme(){ new Vue({ El : ' # scheme _ app '，data(){ return { scheme sinfo : null } }，watch : { scheme sinfo : function(){ this .$ NextTick(function(){ LoadGrade()})} }，mounted () { axios .get('/info/schemes ').然后(回应=(这个。方案sinfo=响应。数据).捕捉(函数（错误){ //请求失败处理console.log(错误);});} })}绿色部分是星级-只读对应的射流研究…处理函数，红色部分是我们对某视频剪辑软件的修改完善，这样修改以后，果不其然，数据都正确的渲染在了模板上