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. HashMap的四种遍历方法，及效率比较（简单明了）

    https://yq.aliyun.com/ziliao/210955 public static void main(String[] args) { HashMap<Integer, Str ...

  2. Python 3.5 in win10 pip install Orange3

    http://www.lfd.uci.edu/%7Egohlke/pythonlibs/ 下载Orange3 以及 依赖包 注意网页上标出的Orange 的依赖,以及 https://github.c ...

  3. 【BZOJ3240】【UOJ#124】【NOI2013】矩阵游戏

    终于看懂一道题QAQ然而NOI都是这种难度题怎么玩QAQ 原题: 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的n行m列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若 ...

  4. #pragma Directive in C/C++

    The #pragma is complier specified. for example, the code below does not work in gcc. #pragma startup ...

  5. 围棋术语 & 中英文 。

    https://senseis.xmp.net/?ChineseGoTerms 一字 二字 三字 四字 一字 长(nobi,solid extension),是指仅靠着自己的棋盘上已有棋子继续向前延伸 ...

  6. Laya IDE 快捷键

    Laya IDE 快捷键: ctrl+p 快速打开文件,fb中对应的是ctrl+shift+G ctrl+d 删除一行 ctrl+shift+o打开符号 alt+shift+下箭头 复制一行 alt+ ...

  7. oracle-锁概念

    http://liwenshui322.iteye.com/blog/1166934 ORACLE DDL锁介绍 在DDL操作中会自动为对象加DDL锁(DDL Lock),从而保护这些对象不会被其他会 ...

  8. 短小而精悍的JsvaScript函数

    1. 回到顶部, 使用浏览器的刷新频率 requestAnimationFrame 来实现的 const scrollToTop = () => { const c = document.doc ...

  9. Packet for query is too large (1660 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    原因是mysql 默认允许的 数据报包 是 1M  设置大一些就可以了 centos 下面  /ect/my.cnf 文件里面 加入或者修改 下面的参数 [mysqld] max_allowed_pa ...

  10. django用mysql数据库出现的问题解决

    blog添加不了文章!! 做了个程序,将数据库迁移到服务器之后,发现一个奇怪的错误.Field 'id' doesn't have a default value.查看了一下,程序是没问题的,但是这是 ...