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. ADB简易安装方法

    ADB安装方法: 1. 下载ADB程序 下载地址: 链接:https://pan.baidu.com/s/1CfQL51pBz-2Wk_cYfJYXUw  提取码:bjp8 2. 配置环境变量 pat ...

  2. 3993: [SDOI2015]星际战争

    3993: [SDOI2015]星际战争 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1244  Solved: ...

  3. win10 IoT开发 Serial​Device 返回 null

    树莓派3,win10 Iot,串口开发,抄例子,串口获取返回老是null,例子却可以,代码一样,上网查询结果如下: https://stackoverflow.com/questions/341603 ...

  4. 字符串 转 时间戳 unix_timestamp('2018-07-01 0:0:0')

    SELECT FROM_UNIXTIME(createtime,'%Y%m%d') AS d, s.app,SUM(o.val) FROM orders o LEFT JOIN app_type s ...

  5. 解决table插入tr错位

    table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="&q ...

  6. 【DevExpress】 SearchLookUpEdit

    一.属性的基本介绍: 绑定数据源: lookUpEdit.Properties.ValueMember = 实际要用的字段;   //相当于Editvalue lookUpEdit.Propertie ...

  7. JavaWeb 之事务

    什么是事务? 事务就是逻辑上的一组操作,组成事务的各个执行单元,操作要么全部成功,要么全部失败. 以转账为例: 张三给李四转账,张三扣1000,李四加1000; 加钱和扣钱两个操作组成了一个事务. 1 ...

  8. 转载的shell命令73条

    1.检查远程端口是否对bash开放: echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台: Ctrl + z ...

  9. xml数据发送请求，读取xml

    # coding:utf-8 import requests url = "http://httpbin.org/post" # python3字符串换行,在右边加个反斜杠 bod ...

  10. 用户（user）和用户组（group）相关的配置文件、命令或目录；

    1.与用户(user)和用户组(group)相关的配置文件: 1)与用户(user)相关的配置文件:/etc/passwd 注:用户(user)的配置文件:/etc/shadow 注:用户(user) ...