1.使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    arr:['1','2','3'],

                    json:{a:'a',b:'b'}

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <p>循环数组</p>

        <ul>

            <li v-for="a in arr">

            {{a}}

            </li>

        </ul>

        <hr>

        <p>循环出数组索引</p>

        <ul>

            <li v-for="(v,k) in arr">

            {{v}}==>{{k}}
　　　　　　　</li>

        </ul>

        <p>循环json</p>

        <ul>

            <li v-for="item in json">{{item}}</li>

        </ul>

        <p>循环json的键</p>

        <ul>

            <li v-for="(k,v) in json">

            {{k}}==>{{v}}

            </li>

        </ul>

    </div>

</body>

</html>

结果：

Vue2学习笔记:v-for指令的更多相关文章

  1. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  2. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  3. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  6. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  7. JVM学习笔记——字节码指令

    JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...

  8. 汇编学习笔记(11)int指令和端口

    格式 int指令也是一种内中断指令,int指令的格式为int n,n是中断类型码.也就是说,使用int指令可以调用任意的中断例程,例如我们可以显示的调用0号中断例程,还记得在汇编学习笔记(10)中我们 ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  10. AngularJS1.X学习笔记8-自定义指令（上）

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

随机推荐

  1. 读取Java注解类型

    参考文章: (1)https://www.cnblogs.com/extjs4/p/6411507.html 关于注解第一篇 (2)https://www.cnblogs.com/extjs4/p/6 ...

  2. 关于C++中操作符重载的疑问 ：四个运算符=, -&gt;, [], ()不可以重载为全局函数（友员函数）

    转载自:http://blog.csdn.net/u014610226/article/details/47679323     以下是对C++中不能重载为友元函数的四个运算符进行了详细的分析介绍,需 ...

  3. 微信公众号H5支付

    微信支付说明1.统一下单接口 统一支付接口: url: https://api.mch.weixin.qq.com/pay/unifiedorder 目的:通过此接口来创建预支付订单,获取订单支付需要 ...

  4. 使用axios实现上传图片进度条

    在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...

  5. oracle = : ：= 和变量绑定 oracle通配符和运算符

    这篇是7788凑的:":="是赋值语句 如: l_name :='sky';..."=" 是判断是否相等. 如: if 1=1 then...":&q ...

  6. JS事件细分

    鼠标相关事件执行顺序 与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮): onmousedown onmouseup onclick 与 onmousedown 事件相关 ...

  7. springboot启动太慢优化

    需求缘起:有人在[springboot]微信公众号问:springboot启动慢的问题何时有个分享就好了,谢谢.粉丝的问题还是要认真的回答的. 我们先看看本节的大纲: (1)组件自动扫描带来的问题(@ ...

  8. [转] Linux Crontab 定时任务 命令详解

    一.  Crontab 介绍 crontab命令的功能是在一定的时间间隔调度一些命令的执行. 1.1 /etc/crontab 文件 在/etc目录下有一个crontab文件,这里存放有系统运行的一些 ...

  9. Winform 常用的方法

    一,Winform 如何内嵌窗体 1,判断窗体中是否以还有内嵌窗体 private void ClosePreForm() { foreach (Control item in this.spCont ...

  10. java编写带头结点的单链表

    最近在牛客网上练习在线编程,希望自己坚持下去,每天都坚持下去练习,给自己一个沉淀,不多说了 我遇到了一个用java实现单链表的题目,就自己在做题中将单链表完善了一下,希望大家作为参考也熟悉一下,自己 ...