v-for遍历数组、对象数组、对象、迭代次数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-for遍历</title>

    <script src="../lib/vue.js"></script>

</head>

<body>

    <div class="app">

        <p v-for="(i,item) in list">******索引值：{{ i }}***值：{{ item }}******</p>

        <!-- v-for遍历普通数组 -->

        <p v-for="(item,i) in arr">id:{{item.id}}********name:{{item.name}}*******索引值：{{i}}</p>

        <!-- v-for遍历数组中的对象 -->

        <p v-for="(val,key,i) in user">val:{{val}}****key:{{key}}******index:{{i}}</p>

        <!-- v-for直接遍历对象 -->

        <p v-for="i in 10">这是第{{i}}次循环</p>

        <!-- 遍历迭代次数 -->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                list:[0,1,2,3,4,5],

                arr:[

                    {'id':1,'name':'齐怪'},

                    {'id':1,'name':'齐怪'},

                    {'id':1,'name':'齐怪'},

                ],

                user:{

                    'id':'1',

                    'name':'齐怪',

                    'sex':'boy'

                }

            }

        })

    </script>

</body>

</html>

vue.js（8）--v-for的使用的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. Vue.js学习笔记（1）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

  3. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  4. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  7. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  8. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  9. Vue.js常见问题

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  10. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

随机推荐

  1. luogu3350 [ZJOI2016]旅行者

    链接 P3350 [ZJOI2016]旅行者 题目大意:给出网格图,求两点之间最短路,多组询问. \(n*m\leq10^5\ \ q\leq 10^5\) 考虑\(CDQ\)分治. 首先把询问离线, ...

  2. 一次Oday提权批量拿取商城服务器root权限

    此问题影响范围巨大,涉及到所有通过niushop开发的商城,希望通过这篇文章能够引起大家的重视.(注:演示的所用商城已经修复了此漏洞) 严重性:特级 解决方案:1.在用户访问漏洞页时对其身份进行判断: ...

  3. PyTorch 手动提取 Layers

    Model NeuralNet( (l0): Linear(in_features=6, out_features=256, bias=True) (relu): ReLU() (bn0): Batc ...

  4. 父工程 pom版本

    <!-- 集中定义依赖版本号 --> <properties> <junit.version>4.12</junit.version> <spri ...

  5. python 生成多维数组

    在刷题时用到了数组,因为不提供三方库所以不能使用Numpy.想如何通过python列表模拟数组. 第一种方法 """ 生成n*m的初始值为0的矩阵 "" ...

  6. Solidworks 2019 无法获得下列许可solidworks standard无效的(不一致的)使用许可号码(-8,544,0)

    若出现如下述错误,只需将C:\***(C盘中生成注册表的文件夹)\Program Files\SOLIDWORKS Corp\SOLIDWORKS下的netapi32.dll文件复制到所安装路径中SO ...

  7. iOS无限后台加速耗电的问题

    背景 总所周知,iPhone的电池容量本身比较小.所以iOS系统本身为了弥补这一短板做出了一个重大的优化 —— 『伪后台』. 这一机制是在iPhone在续航上发挥重大的作用,但是也因为『伪后台』限制了 ...

  8. apktool介绍

    apktool可以反编译出app的资源文件,apktool工具的下载路径:https://ibotpeaches.github.io/Apktool/ 下载后获取到一个jar文件,可以通过如下命令进行 ...

  9. Linux学习篇（三）-Linux操作系统及常用命令

    小知识:南桥北桥 北桥是高速总线控制器,在CPU附近,连接内存和CPU,需要传输大量数据. 南桥是低速总线控制器,用于连接IO设备(硬盘键盘鼠标等),IO设备由南桥汇总会直接传入北桥.,目前cpu可以 ...

  10. python2.7+RobotFramework的UI自动化环境搭建

    robotFramework是一种比较常见的自动化测试框架,此篇记录环境搭建 目录 1.软件准备 2.执行安装 1.软件准备 python-2.7.15.amd64.msi              ...