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

当前位置:快三内蒙古专家推荐 > 教程 > 服务器类 >

內蒙古快3开奖结果:当我们从后端接口或者json文件使用ajax获取数据之后现实到页面

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

快三内蒙古专家推荐 www.btfqn.cn Vue.js是一个构建数据驱动的web界面的库。重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合

Vue.js 的核心是一个响应的数据绑定系统,它让数据与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”代替,优点是数据没有加载完时不会看到{{}}占位符

尚未注册畅言帐号,请到后台注册
  • 苗山脱贫影像志——父母在 不远行 2019-03-20
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-03-14
  • 秦珂:联盟不是生态圈本身,是生态圈的过程 2019-03-14
  • “陪堂妈妈”上课3000多节 班主任:她去中考没问题 2018-08-22
  • 城区加大扬尘污染治理力度 所有施工现场必须安装视频监控 2018-08-22
  • 张继科状态低迷 刘国梁倍感压力 2018-07-26
  • 互联网金融协会提示:防范变相“现金贷”业务风险 2018-07-26
  • 6月乌鲁木齐这些片区要停电 2018-07-25
  • 补时绝杀!英格兰2-1突尼斯 凯恩梅开二度 2018-07-24
  • 张太雷烈士大学毕业证书回到故乡常州 2018-07-24
  • 对于马克思主义者来说,什么也不值得惋惜,历史教训才值得的总结 2018-07-23
  • 少了两个气缸,这台跑车依然能做你的Dream Car 2018-07-23
  • 上海频繁"出镜"好莱坞 大片里重要的"未来"城市 2018-07-22
  • 回复@海之宁:不给你分配生产资料你咋尽所能? 2018-07-21
  • 惊险!28吨浓亚硫酸泄露 消防官兵9小时排险 2018-07-21
  • 210| 221| 746| 676| 806| 853| 351| 467| 251| 447|