详解vuejs之v-for列表渲染


Posted in Javascript onJune 22, 2017

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数据节点

详解vuejs之v-for列表渲染

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

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

详解vuejs之v-for列表渲染

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

GetAjaxData("js/cstore2.json", {name:"zq"}, function (dat) {
      
      var data = dat.cstore

      // console.log(data)
      
      var vm = new Vue({
        el: '#example',
        data: {
          items: data
        }
      })
    });

详解vuejs之v-for列表渲染

<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

详解vuejs之v-for列表渲染

 {{item.city}}也可以使用v-text=” item.city”代替,优点是数据没有加载完时不会看到{{}}占位符

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS定时器实例
Apr 17 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue.js实现条件渲染的实例代码
Jun 22 #Javascript
vue.js 上传图片实例代码
Jun 22 #Javascript
详解Angular 开发环境搭建
Jun 22 #Javascript
详解Angular2组件之间如何通信
Jun 22 #Javascript
Angular2 父子组件数据通信实例
Jun 22 #Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 #Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 #Javascript
You might like
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
Python如何生成树形图案
2018/01/03 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
文员个人的求职信范文
2013/09/26 职场文书
母亲节感恩寄语
2014/02/21 职场文书
员工合理化建议书
2014/05/19 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
导游词之韩国济州岛
2019/10/28 职场文书