详解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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue实现一拉到底的滑动验证
Jul 25 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
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环境――Appserv
2006/12/13 PHP
php命令行写shell实例详解
2018/07/19 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
json字符串传到前台input的方法
2018/08/06 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
快速了解python leveldb
2018/01/18 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python最小二乘法矩阵
2019/01/02 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
最小二乘法及其python实现详解
2020/02/24 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python设置中文界面实例方法
2020/10/27 Python
人力资源管理求职信
2014/08/07 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python