vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

对象遍历

value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="value in me"；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

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

</head>

<body>

    <div id="demo">

          <ul>

              <li v-for="value in object">

                {{ value }}

              </li>

        </ul>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                object: {

                      firstName: 'John',

                      lastName: 'Doe',

                      age: 30

                }

            }

        })

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

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

</head>

<body>

    <div id="demo">

         <div  v-for="(value, key,index) in object">

         {{ index }} : {{ key }} : {{ value }}

        </div>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                object: {

                      firstName: 'John',

                      lastName: 'Doe',

                      age: 30

                }

            }

        })

    </script>

</body>

</html>

数组遍历

数组遍历和对象遍历相类似，最大的不同点在于对象的 “key” 和 “index” 是一致的，所以这里我们只需要取一个 index 即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

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

</head>

<body>

    <div id="demo">

         <ul>

            <li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}：{{item}}</li>

        </ul>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                items: ['apple', 'tomato', 'banana', 'watermelon']

            },

            methods:{

                onclick(index){

                    alert(index);

                }

            }

        })

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

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

</head>

<body>

    <div id="demo">

        <ul>

             <li v-for="todo in items">

                    {{ todo.message}}

              </li>

        </ul>

         <ul>

             <li v-for="(item, index) in items">

                    {{ parentMessage }} - {{ index }} - {{ item.message }}

              </li>

        </ul>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                parentMessage: 'Parent',

               items: [

                      { message: 'Foo' },

                      { message: 'Bar' }

                ],

            }

        })

    </script>

</body>

</html>

vue之v-for的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  2. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  3. vue集成环信IM

    vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1  123456  test2  123456  test3  123456 默 ...

  4. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  5. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  6. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  7. vue基础响应式数据

    1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...

  8. vue.js 配置axios 用来ajax请求数据

    * 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...

  9. 第六十二篇：Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

  10. 微信小程序探究

    前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...

随机推荐

  1. NYOJ 737：石子合并（一）（区间dp）

    737-石子合并(一) 内存限制:64MB 时间限制:1000ms 特判: No 通过数:30 提交数:37 难度:3 题目描述: 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆. ...

  2. java-接口的成员特点

    1.成员变量: - 只能是常量,并且是静态的.公共的. - 默认修饰符:public static final - 建议:自己手动给出. 2.构造方法:接口没有构造方法. 3.成员方法: - 只能是抽 ...

  3. php-isset和empty

    <?php $a = null; if(isset($a)){ echo "is set"."\n"; } else{ echo "not se ...

  4. HTML的属性

    data-的好处:对dom的一些自定义标识,通过这些标识符可以传递一些信息到相应的事件里:dom.dataset['属性名称'] 将节点变成数组 渐进式渲染:就是加载到哪里就显示到哪里 css和js的 ...

  5. 线程---同步（synchronized）

    实现线程同步的一种方式介绍: 思路: 首先,需要被协调的类,先实现线程,并重写run方法 然后,在被协调的类中私有化控制器,控制器实例化,由构造器带入. 其次,由控制器对象具体负责调用. 举例:循环输 ...

  6. （转）Redis(四)哨兵_sentinel

    发现一篇文章写的特别的详细,所以在这里转载,记录一下.照着文章中的内容自己动手实践了. 原文地址:http://blog.csdn.net/a67474506/article/details/5043 ...

  7. UML异步怎么表达

    直接看结果 第一虚框和第二虚框是异步的.m1 和m2 没有任何先后关系. 第一虚框和第二虚框是异步的,两者没有任何先后关系.m3和m4是有先后关系的.m3()比m4()先执行.同样m5()和m6().

  8. java_生态环境

    Which Java package do I need? Software Developers: JDK (Java SE Development Kit). For Java Developer ...

  9. FastAdmin Git 开发更新流程

    更加简洁的流程 FastAdmin 使用 Git 更新的新用法 https://www.cnblogs.com/F4NNIU/p/9120365.html

  10. Ionic 发布可重用代码到NPM上

    1.首先下载可重用模板 https://github.com/ionic-team/ionic-module-template 2. 将模板改包名后发布到NPM上 如果你没有NPM账号,先进行注册. ...