详解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动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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学习笔记 数组遍历实现代码
2011/06/09 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
原生js二级联动效果
2017/06/20 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python的concat等多种用法详解
2018/11/28 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django model update的多种用法介绍
2020/03/28 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python Selenium 库的使用技巧
2020/10/16 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
语文教育专业推荐信范文
2013/11/25 职场文书
四个太阳教学反思
2014/02/01 职场文书
经济担保书范文
2014/04/02 职场文书
仓库管理计划书
2014/05/04 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
AJAX学习笔记
2021/05/18 Javascript