v-for循环指令类似与html中C标签的循环，同样可以遍历数组，集合。

1、这里演示一下遍历数组的基本用法，代码如下

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

     <div id="id">

         <p v-for="arr in array">

             {{arr.course  }}

             {{arr.name}}

         </p>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#id",

         data:{

             array:[

                 {course:'java'},

                 {course:'Vue.js'},

                 {course:'javaScript'},

                 {name:'曹操'},

                 {name:'孙权'},

                 {name:'刘备'}

             ]

         }

     })

 </script>

 </html>

结果：

在控制台里，输入 id.array.push({ course: '新课程' })，你会发现列表中添加了一个新课程

2、在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

     <ul id="app">

         <li v-for="(p, index) in people"> <!--添加索引-->

             {{ parentMessage }} --- {{ index }} --- {{ p.name }}

             <!--访问父作用域属性parentMessage-->

         </li>

     </ul>

 </body>

     <script>

     var vm = new Vue({

         el:"#app",

         data:{

             parentMessage: '罗贯中',

             people: [

                 {name:'曹操'},

                 {name:'孙权'},

                 {name:'刘备'}

             ]

          }

     })

 </script>

 </html>

输出结果：

备注：<div v-for="item of items"></div>   用of 代替 in 也是合法的

3、对象迭代 v-for

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

     <ul id="app">

         <li v-for="(value,key,index) of object"> <!--添加索引-->

            {{parentMessage}}---{{key}}{{value}}---{{index}}

         </li>

     </ul>

 </body>

     <script>

     var vm = new Vue({

         el:"#app",

         data:{

             parentMessage: '施耐庵',

             object: {

                 浪子:'燕青',

                 花和尚:'鲁智深',

                 鼓上骚:'时迁'

             }

          }

     })

 </script>

 </html>

输出结果：

4、整数迭代 v-for

<div>

  <span v-for="n in 10">{{ n }}</span>

</div>

vue 列表渲染 v-for循环的更多相关文章

  1. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  2. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  3. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  4. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  5. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

  6. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  7. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  8. vue 列表渲染 v-for

    1.数组列表       v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染       v-for="item ...

  9. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

随机推荐

  1. ES6学习笔记之变量声明let,const

    最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能 ...

  2. Dev GridControl 小结3

    Dev GridControl 小结 时间 2014-03-26 19:24:01  CSDN博客 原文  http://blog.csdn.net/jiankunking/article/detai ...

  3. MySQL中Index Condition Pushdown(ICP)优化

    在MySQL 5.6开始支持的一种根据索引进行查询的优化方式.之前的MySQL数据库版本不支持ICP,当进行索引查询是,首先根据索引来查找记录,然后在根据WHERE条件来过滤记录.在支持ICP后,My ...

  4. 通过Python操作hbase api

    # coding=utf-8 # Author: ruin """ discrible: """ from thrift.transport ...

  5. （4.11）sql server内存使用

    一些内存使用错误理解   开篇小感悟 在实际的场景中会遇到各种奇怪的问题,为什么会感觉到奇怪,因为没有理论支撑的东西才感觉到奇怪,SQL Server自己管理内存,我们可以干预的方式也很少,所以日常很 ...

  6. springboot 项目跨域问题 CORS

    package com.example.demo.cors; import org.springframework.context.annotation.Bean; import org.spring ...

  7. ZFI_VENDOR_CREATE

    创建供应商函数, 需要考虑是 G_TASK = I /U /M FUNCTION zfyj_vendor_create. *"-------------------------------- ...

  8. Google Cloud Platfrom中运行基础的Apache Web服务

    Links: https://cloud.google.com/compute/docs/tutorials/basic-webserver-apache 步骤: 1.安装Apache 2.重写Apa ...

  9. HTMLbutton控件中文字显示一直不居中

    在写HTML时,发现HTML中button控件中文字显示一直不居中, 最后发现是在标签前出现了一个全角空格引起的. 在Emeditor中将不显示的字符(空格,全角空格,换行,制表符)设置为显示,就可以 ...

  10. BigDecimal类型、Long类型判断值是否相等,以及BigDecimal加减乘除

    //Long是需要比较精度的,所以要用longValueif(project.getFriendId().longValue() != friendId.longValue()) { return t ...