详解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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
DOM事件探秘篇
Feb 15 Javascript
基于jquery实现五星好评
Nov 18 jQuery
从vue源码解析Vue.set()和this.$set()
Aug 30 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读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
大学生如何写自荐信
2014/01/08 职场文书
高三地理教学反思
2014/01/11 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
毕业生面试求职信
2014/06/23 职场文书
运动会表扬稿
2015/01/16 职场文书
离婚代理词范文
2015/05/23 职场文书
联谊会开场白
2015/06/01 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python