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. hdu2587(递推)

    目前做过的最纠结的一道递推题. 情况比较多,比较复杂... 这题最主要的还是要推出当m=2 时和m>2时,用什么方法最优. 给个数据 n=3,m=2   需要48 n=3,m=3 需要81 如果 ...

  2. 导出网页中的table到excel

    导出网页中的table到excel的两种简便方法: 1. 纯 JavaScript 方法,缺点只支持IE浏览器 var elTable = document.getElementById(" ...

  3. HTP 302 SEO作弊

    w 李智慧

  4. 【转】Power System 中基于 VIOS 的虚拟以太网实现

    基于 VIOS 的虚拟以太网适配器的工作原理和配置实现 本文对 Power 系统中基于 VIOS 的虚拟以太网适配器(Virtual Ethernet Adapter)的工作原理.基本配置选项和配置步 ...

  5. [转载]H5项目常见问题汇总及解决方案

    本文转载自:http://www.open-open.com/lib/view/open1449325854077.html Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 / ...

  6. 使用QFile进行文件操作（QFile可以使用FILE *指针，还必须指定AutoCloseHandle）

    QFile类我我们提供了操作文件的常用功能.它是一种io设备,可以用来读写文本文件和二进制文件,也可以用来读写Qt的资源文件.QFile类可以单独使用,该类本身提供了read/write函数,但更方便 ...

  7. SE80 开发对象

    偶然发现:开发对象可以自动识别对象的类别.

  8. iOS 优化界面流畅度的探讨

    界面流畅度 大都跟list scrollView有紧密关联 流畅的视觉:就是如丝般顺滑 不流畅视觉:”卡顿”,”抖动”,”迟顿感” 以上两种状态的描述 都是基于主观感觉,对于开发者来说 确实应该有一个 ...

  9. Understanding When to use RabbitMQ or Apache Kafka

    https://content.pivotal.io/rabbitmq/understanding-when-to-use-rabbitmq-or-apache-kafka How do humans ...

  10. 每天一个Linux命令（59）wget命令

        wget命令用来从指定的URL下载文件.     (1)用法:     用法:  wget  [参数]  [URL]     (2)功能:     功能:  wget命令用来从指定的URL下载 ...