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. Damped Track 阻尼跟随

    Damped Track 阻尼跟随 https://www.youtube.com/watch?v=pd1od5WPCUw 2个网格及对应的2个空对象Z轴方向网格:{O.up}; 上方园孔把手中间放空 ...

  2. （1）什么是web框架和http协议

    Django是一个web框架 web框架的本质:就是一个socket服务端 bs架构本质上就是cs架构(cs架构就是client和server):bs架构就是browser和server,本质上bro ...

  3. python筛选特定文件的信息按照格式输出到txt

    最近搞数据库,为了把图片文件的信息导入数据库表中,我开始研究python列出图片文件,其中发现因为IE临时文件里有非常多的不需要的图片,就需要筛选掉一些文件. 最终用python输出了所有需要的图片文 ...

  4. linux----磁盘介绍

    1.磁盘简图: 2.常见分区 mbr:主引导区,共512byte 扩展分区 逻辑分区

  5. java构造代码块详解

    一.简介 首先说一下,Java中有哪些代码块. 普通代码块 就是在方法后面使用"{}"括起来的代码片段,不能单独执行,必须调下其方法名才可以执行. 静态代码块 在类中使用stati ...

  6. web项目【3】

    前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.a ...

  7. "ERR unknown command 'cluster'"

    golang 连接redis 集群提示  "ERR unknown command 'cluster'" redisdb = redis.NewClusterClient(& ...

  8. 扩大UIButton的选区

          设计为了美观.button有时设计的太小,这么一来是好看了.可是button不好点中了.曾经有非常多解决方法,如用hitTest等方法. 都比較复杂.后来我发现一个简单的方法. 原理就是U ...

  9. 你不知道的JavaScript(中卷) (Kyle Simpson 著)

    第一部分 类型和语法 第1章 类型 1.1 类型 1.2 内置类型 1.3 值和类型 1.3.1 undefined和undeclared 1.3.2 typeof Undeclared 1.4 小结 ...

  10. C# to IL 8 Methods(方法)

    The code of a data type is implemented by a method, which is executed by the ExecutionEngine. The CL ...