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. SQL-学习过程-001

    1.了解什么是SQL和T-SQL 2.对数据库的对象的学习 数据库>>>数据表>>>字段>>>记录>>>视图>>&g ...

  2. Linux下7z工具安装

    sudo apt-get install p7zip p7zip-full p7zip-rar 使用: 使用7z --help查看使用方法. 解压: 7za X test.7z

  3. 《DSP using MATLAB》Problem 5.1

    恰逢清明,这几天是清明时节雪纷纷,断崖式降温:又回到了老家,儿时上蹿下跳的核桃树,远去的故乡,远去的时代…… 用到的公式: 这里只放前两个小题的计算过程,都比较简单,细心就行.代码如下: %% --- ...

  4. 进程的环境变量environ

    编程之路刚刚开始,错误难免,希望大家能够指出. 每个进程都有自己的环境变量,在C语言程序中可使用外部变量(char **environ)来访问环境,而库函数可允许进程去获取或修改自己环境的值. 两种方 ...

  5. 【JVM】内存分析<一>工具的使用

    一. 获取堆快照 1.出现OOME时生成堆dump: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: -XX:HeapDum ...

  6. 每天进步一点点-一切皆对象/一次编写，到处运行/bean工厂

    只要这个配置文件一写,其他所有的java类都可以用 用法1.直接在类中getBeans,然后调用beans的方法 用法2.将这些bean进行注入,基于xml的注入<property name=& ...

  7. oracle使用flashback时，没有显示undosql

    这是因为oracle11g没有开启这个功能 用管理员用户sys(也就是sysdba)执行以下语句即可 alter databases add supplemental log data; 如果我们想恢 ...

  8. 【VBA研究】VBA自己定义函数參数类型不符的错误

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/iamlaosong/article/details/36871769 作者:iamlaosong 1 ...

  9. MySQL事务描述

    并发事务处理引起的数据问题 更新丢失(Lost Update):当两个或多个事务选择同一行,然后基于最初选定的值更新该行时,由于每个事务都不知道其他事务的存在,就会发生丢失更新问题--最后的更新覆盖了 ...

  10. oracle之 ORA-12557: TNS: 协议适配器不可加载

    操作系统:windows 7数据库版本: 11.2.0.1问题描述:直接通过 sqlplus sys/oracle@10.10.100.109:1521/ysxt as sysdba 可以登录,但是通 ...