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. 【BZOJ3944/4805】Sum/欧拉函数求和 杜教筛

    [BZOJ3944]Sum Description Input 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询问 Output 一共T行,每行两个用 ...

  2. 进程 query foreach

    http://php.net/manual/en/pdo.query.php PDO::query() executes an SQL statement in a single function c ...

  3. docker desktop

    https://github.com/rogaha/docker-desktop http://blog.csdn.net/tinylab/article/details/45443563

  4. openvas-tutorial-for-beginners

    https://jonathansblog.co.uk/openvas-tutorial-for-beginners

  5. ehcache 常用配置项详解（三）

    EhCache 给我们提供了丰富的配置来配置缓存的设置: 这里列出一些常见的配置项: cache元素的属性: name:缓存名称 maxElementsInMemory:内存中最大缓存对象数 maxE ...

  6. centos7 终端修改字体大小

    如果你觉得你的终端字体太小了,停下来看一看这里可以帮你快捷修改字体大小 修改字体大小(这个是最坑爹的) 其实关键的命令就一个:setfont 但是setfont后面要跟的字体到底要写什么就的具体去查了 ...

  7. Jquery获取dom上的绑定事件

    在1.8.0版本之前的写法: $.data(domObj,'events');//或者$('selector').data('events') 1.8.0及以后的写法: $._data(domObj, ...

  8. 修改impala表location

    两种方式: 一.通过修改表DDL: alter table t_m_cc set location 'hdfs://heracles/user/video-mvc/hive/warehouse/t_m ...

  9. nodejs koa2 获取get值和post值，提交表单

    // 获取get值 router.get('/b', async(ctx, next) => { ctx.state = { title: 'Koa2', name: '小明-list' } l ...

  10. .NET Framework 3.5-8 下载地址

    https://dotnet.microsoft.com/download/dotnet-framework Version Released End of life .NET Framework 4 ...