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. Atcode ABC105-C：Base -2 Number

    C - Base -2 Number Time Limit: 2 sec / Memory Limit: 1024 MB Score : 300300 points Problem Statement ...

  2. C语言--第八周作业评分（5班）

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1400 一.评分要求 要求1 完成14.15周的所有PTA中题目集,总共4次题 ...

  3. 08 正则表达式，Math类，Random，System类，BigInteger，BigDecimal，Date，DateFormat，Calendar

    正则表达式:    是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. public class Demo2_Regex { public sta ...

  4. 《DSP using MATLAB》Problem 6.6

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  5. MongoDB的真正性能-实战百万用户

    阅读目录 一.第一个问题:Key-Value数据库可以有好多的Key,没错,但对MongoDB来说,大错特错 二.第二个问题:FindOne({_id:xxx})就快么? 三.第三个问题:精细的使用U ...

  6. （惊艳）对象序列化和反序列--Hibernate的查询和新增极其相似

    Hibernate几个关键字持久化,ORM(关系对象映射)(数据库中关系称作是一张表) 应用在项目中,刘一从写的查询代码,每次都挂掉,想要弄出测试数据,自己想着把查询出来的复杂数据弄到文件里自己要是去 ...

  7. deno学习三 官方提供的方便deno 安装方式

    早起deno 使用了golang 开发,同时需要protobuf 进行数据的序列化以及反序列化处理 当前的deno 已经使用rust 进行了开发,同时官方提供的安装方式也很方便了,不需要 那么复杂的编 ...

  8. mysql全备和增量备份以及恢复过程（percona工具）

    实验环境 系统环境,内核版本和xtrabackup工具版本 [root@linux-node1 mysql]# cat /etc/redhat-release CentOS Linux release ...

  9. 亿级用户百TB级数据的AIOps 技术实践之路

    关于面临的挑战 "因为专业性强,我认为反而让交互方式变简单了,打个点餐的比方,软件1.0阶段是,我要吃鱼香肉丝,我要吃辣的或是素一点的,根据清晰的接口上菜.而软件2.0阶段就是,我今天想吃开 ...

  10. 2019.4.11 一题 XSY 1551 ——广义后缀数组（trie上后缀数组）

    参考:http://www.mamicode.com/info-detail-1949898.html (log2) https://blog.csdn.net/geotcbrl/article/de ...