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. 【BZOJ2870】最长道路tree 点分治+树状数组

    [BZOJ2870]最长道路tree Description H城很大,有N个路口(从1到N编号),路口之间有N-1边,使得任意两个路口都能互相到达,这些道路的长度我们视作一样.每个路口都有很多车辆来 ...

  2. angularjs 复选框 单选框

    关于复选框,在做项目的时候,有一下几点心得 单选框 1.判断哪个单选框选中的情况 html代码 判断该复选框是否选中 $scope.agree.isChecked     判断这个值,如果等于1,代表 ...

  3. angularjs 发送ajax请求的问题

    在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...

  4. Neighbor Discovery Protocol Address Resolution Protocol

    https://en.wikipedia.org/wiki/Address_Resolution_Protocol The Address Resolution Protocol (ARP) is a ...

  5. C# 自定义控件摘记

    C# 自定义控件属性 现有自定义控件,内有一textbox控件 TextBox1.控件有一属性 Value 定义为 [BrowsableAttribute(true)] [BindableAttrib ...

  6. 如何定义 match 常量?

    namespace MathConstants { const double E = 2.71828182845904523536; // e const double LOG2E = 1.44269 ...

  7. while循环。for循环

    1.while循环 基本循环格式 while 条件 : # 循环体 # 如果条件为真,那么循环体则执行 # 如果条件为假,那么循环体不执行 break:退出本层循环. continue:退出本次循环, ...

  8. Spring学习笔记3—声明式事务

    1 理解事务 事务:在软件开发领域,全有或全无的操作被称为事务.事务允许我们将几个操作组合成一个要么全部发生要么全部不发生的工作单元. 事务的特性: 原子性:事务是由一个或多个活动所组成的一个工作单元 ...

  9. 字符串之strchr

    功能:查找字符在字符串中第一次出现的位置. #include <iostream> #include <assert.h> using namespace std; char ...

  10. 20170401 错了两天的-XML解析

    你不找到的话,错误就在那里.你找到了错误才会成为财富! Strans XML 解析3要素:1.源xml 格式正常, eg. '<?xml version="1.0" enco ...