北京pk10五码全天计划 pk10计划专家在线计划 赛车赌博是怎么回事 pk10输100万怎么上岸 怎么玩pk10才能赢钱 pk10赛车345678方案 北京pk10九码为什么输 北京pk10计划怎么倍投 pk10赛车冠军有规律 pk10最牛稳赚5码计划 pk10大小单双算法 玩pk10倾家荡产案例 pk10怎么翻倍最合理 pk10冠亚和在线计划 北京pk10十码刷水 北京pk10手机购买平台 北京pk10网赌 北京pk全天免费计划 北京pk10刷负盈利平台 北京pk10如何看大小 pk10买8码杀2码好方法 北京pk10全天一期计划 北京pk10网赌害人案例 北京pk赛车一天开几期 北京pk两期免费计划 北京pk9.99倍网站 北京pk赛车5码计划最准 网上赛车赌博犯法吗 北京pk拾计划在线计划 北京pk10技巧规律后8码

蒲公英联盟提供ghost win10,ghost win7,xp,装机纯净版,64位旗舰版,绿色软件,免费软件下载基地!

当前位置:主页 > 教程 > 服务器类 >

当我们从后端接口或者json文件使用ajax获取数据之后现实到页面

来源:蒲公英系统┆发布时间:2018-10-30 00:05┆点击:

Vue.js是一个构建数据驱动的web界面的库。重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合

Vue.js 的核心是一个响应的数据绑定系?#24120;?#23427;让数据与DOM保持同步非常简单

如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面

1.使用js的for循环去遍历填充

2.ng的ng-repeat

今天我们使用vue.js的v-for

vuejs之v-for列表渲染教程 三联

一、html

<div class="shop_list_box"> <ul> <li><span>蚌埠</span><span>凤阳东路</span></li> <li><span>蚌埠</span><span>凤阳东路</span></li> </ul> </div>

二、Json数据节点

 三、使用v-for绑定数据到页面上

引用vue.js,请求数据成功之后实例化一个Vue。el是绑定到那个元素下

当我们从后端接口或者json文件使用ajax获取数据之后现实到页面

注意这里时一个数组里面包了一些对象---->{}或者[{},{},{}]

GetAjaxData("js/cstore2.json", {name:"zq"}, function (dat) { var data = dat.cstore // console.log(data) var vm = new Vue({ el: '#example', data: { items: data } }) });

当我们从后端接口或者json文件使用ajax获取数据之后现实到页面

<div class="shop_list_box"> <ul id="example"> <li v-for="item of items"> <span>{{ item.city }}</span><span>{{ item.shop }}</span> </li> </ul> </div>

到这里就ok了。

不过也可以使用template v-for

template v-for  类似于v-for

当我们从后端接口或者json文件使用ajax获取数据之后现实到页面

{{item.city}}也可以使用v-text=” item.city”代替,优点是数据没有加载完时不会看到{{}}占?#29615;?/p>

尚未注册畅言帐号,请到后台注册
北京体彩赛车开奖结果