一、什么是v-for指令

在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。

二、遍历数组

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!--引入vue.js-->

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

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面

               data:{

                      array:[1,2,3,4],//数组

               },

               // 方法

               methods:{

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

                <div>

                    <h1>下面的使用v-for遍历数组</h1>

                    <div>

                          <h1>只显示值</h1>

                          <ul>

                              <li v-for=" v in array">{{v}}</li>

                          </ul>

                      </div>

                      <div>

                        <h1>显示值和索引</h1>

                        <ul>

                            <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>

                        </ul>

                      </div>

                </div>

    </div>

</body>

</html>

其中index表示数组的索引

效果如下图所示：

注意：最新的版本中已经移除了$index获取数组索引的用法

三、遍历对象

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>使用v-for指令遍历对象</title>

    <!--引入vue.js-->

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

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面

               data:{

                      obj:{name:"tom",age:3},//对象

               },

               // 方法

               methods:{

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

          <div>

              <h1>下面的使用v-for遍历对象</h1>

              <div>

                    <h1>只显示值</h1>

                    <ul>

                        <li v-for=" v in obj">{{v}}</li>

                    </ul>

                </div>

                <div>

                  <h1>显示值和键</h1>

                  <ul>

                      <li v-for=" (v,index) in obj">值:{{v}},对应的键:{{index}}</li>

                  </ul>

                </div>

          </div>

    </div>

</body>

</html>

效果如下图所示：

四、遍历数组对象

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>使用v-for指令遍历数组对象</title>

    <!--引入vue.js-->

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

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面

               data:{

                      lists:[

                          {name:"kevin",age:23},

                          {name:"tom",age:25},

                          {name:"joy",age:28}

                      ]

               },

               // 方法

               methods:{

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

          <div>

                <h1>下面的使用v-for遍历数组对象</h1>

                <div>

                      <h1>只显示值</h1>

                      <ul>

                          <li v-for=" list in lists">name值:{{list.name}},age值:{{list.age}}</li>

                      </ul>

                  </div>

                  <div>

                    <h1>显示值和键</h1>

                    <ul>

                        <li v-for=" (list,index) in lists">name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}</li>

                    </ul>

                  </div>

            </div>

    </div>

</body>

</html>

效果如下图所示：

Vue.js常用指令：v-for的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue.js常用指令：v-model

    一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...

  7. Vue.js常用指令：v-on

    一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...

  8. Vue.js常用指令：v-show和v-if

    一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

  9. Vue.js常用指令：v-bind

    一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...

随机推荐

  1. VUE 2.x SEO 优化问题 vue-meta-info && prerender-spa-plugin 配合使用

    VUE 2.x  SEO  优化问题,以及预渲染问题 1.新建项目可以采用nuxt.js , 配置meta.以及预渲染 都很方便,官网文档都很详细: 2.对于已有项目: vue-meta-info & ...

  2. 网络名词拾遗--part2

    网络名词拾遗--part2 关于所谓的连接上限 先要明白服务端和客户端的交互逻辑: 服务端创建socket 与提供对外服务的port端口绑定 开始监听 客户端向这个端口提出请求 服务端接收到这个请求后 ...

  3. 2017-2018-20172309 『Java程序设计』课程 结对编程练习_四则运算_第三周

    2017-2018-20172309 『Java程序设计』课程 结对编程练习_四则运算 组队成员: 仇夏 学号: 20172310 博客地址: @王志伟 四则运算第一周博客 @仇夏四则运算第一周博客 ...

  4. C#6.0特性与vs2015

    C#6.0 中的那些新特性 1. 自动属性的初始化 public string Name { get; set; } = "zhangsan"; 2. 只读属性初始化 public ...

  5. Java中的ReentrantLock和synchronized两种锁定机制

    原文:http://www.ibm.com/developerworks/cn/java/j-jtp10264/index.html 多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之 ...

  6. Java 注释类之常用元注解

    Java 注释类之常用元注解 自定义Java注释类时,我们使用方式如下:   @Retention(RetentionPolicy.RUNTIME)@Target(ElementType.METHOD ...

  7. Makefile 中的.PHONY

    PHONY 目标并非实际的文件名:只是在显式请求时执行命令的名字.有两种理由需要使用PHONY 目标:避免和同名文件冲突,改善性能. 所谓的PHONY这个单词就是伪造的意思,makefile中将.PH ...

  8. 体验jQuery和AngularJS的不同点以及AngularJS的迷人之处

    本篇通过jQuery和Angular两种方式来实现同一个实例,从而体验两者的不同点以及AngularJS的迷人之处. 首先当然需要引用jquery.js和angular.js文件. ■ 使用jQuer ...

  9. error LNK1104:无法打开文件"lua51.lib"

    今天学习C++与Lua通信,遇到了问题:fatal error LNK1104: 无法打开文件“lua51.lib” 开发环境: VS2012 cocos版本:cocos2d-x-3.0 已经按书&l ...

  10. VS2010环境下Winpcap配置方法 (转)

    VS2010 配置Winpcap 新建一个项目,GetDevs.cpp.用来测试.测试代码最后有给出. View->Property Manager Debug|Win32 -> Mirc ...