v-for：对集合或对象进行遍历；

使用v-for对数组遍历时：

效果如下：

代码：

<script>

        window.onload= () =>{new Vue({

            el:'#two',

            data:{

                arr:[11,22,33,44,55,66,77]

              }

})

        }

    </script>

    <body>

        <div id="two">

            <ul>

                <li v-for="value in arr">{{value}}</li>

            </ul>

      </div>

    </body>

使用v-for遍历一个对象时：

<script>

        window.onload= () =>{new Vue({

            el:'#two',

            data:{

                 user:{

                     id:'01',

                     name:'bob'

                 }

                }

            })

        }

</script>

html:

<div id="two">

            <ul>

                <li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>

            </ul>

      </div>

使用v-for遍历多个对象的时：

在vue中加入多个对象：

 users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}]

html:使用v-for进行遍历：

<li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>

使用v-for进行遍历数组、单个对象以及多个对象总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>v-for</title>

     </head>

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

     <script>

         window.onload= () =>{new Vue({

             el:'#two',

             data:{

 //                arr:[11,22,33,44,55,66,77],

 //                 user:{

 //                     id:'01',

 //                     name:'bob'

 //                 }

                 users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}]

                 }

             })

         }

 </script>

     <body>

         <div id="two">

             <ul>

                 <!--<li v-for="value in arr">{{value}}</li>-->

                 <!--<li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>-->

                 <li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>

             </ul>

       </div>

     </body>

 </html>

进行遍历数组，单个对象以及多个对象的代码.html

使用v-for指令渲染列表的更多相关文章

  1. vue入门：（v-for指令与列表渲染）

    v-for渲染列表 维护状态 数组变异方法与替换数组 $set.$remove 对象属性实现列表渲染 一.v-for渲染列表 语法:v-for="item in items" 先来 ...

  2. 前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...

  3. vue v-nav指令属性列表

    v-nav指令属性列表 属性名 属性描述 类型 必选 默认 title 导航栏标题 String No 空字符串 showBackButton 是否显示(左边的)返回按钮 Boolean No fal ...

  4. React.js 小书 Lesson13 - 渲染列表数据

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...

  5. vue2——指令渲染，{{}}渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...

  6. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  7. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  8. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  9. 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能

    1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块  修改了start 脚本  nodemo ...

随机推荐

  1. python requests http请求

    导入模块 import requests import json header = {'Content-Type': 'application/json'} data = {"} data ...

  2. js计算最大公约数和最小公倍数

    一.计算最大公约数 1.小学时候一般采用质因数分解法,一般使用短除得到结果,下面用一种最初级的方法求最大公约数 function gcd2(a,b){ var result = 1; for(var ...

  3. CentOS6.5安装sqoop2

    1.下载软件:http://archive.cloudera.com/cdh5/cdh/5/ 2.解压:tar -zxvf mysofts/sqoop2-1.99.5-cdh5.6.0.tar.gz ...

  4. 2017.11.11日后matlab统一过期需激活解决办法

    转载自此处: 在matlab安装目录中找到license目录,并创建license.lic文件,然后把以下内容copy到文件中,重启matlab. INCREMENT Aerospace_Blocks ...

  5. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  6. Javascript-数据类型转换 、 运算符和表达式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  8. Opcode是啥以及如何使用好Opcache

    转载  https://www.zybuluo.com/phper/note/1016714 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode ...

  9. 获取Sqlserver上一句语句执行后受影响的行数@@rowCount

    from:http://blog.163.com/rihui_7/blog/static/212285143201381343240404/ 返回受上一语句影响的行数. ROWCOUNT_BIG.&q ...

  10. Unity shader学习之屏幕后期处理效果之边缘检测

    边缘检测的原理是利用一些边缘检测算子对图像进行卷积操作. 转载请注明出处:http://www.cnblogs.com/jietian331/p/7232707.html 例如: 代码如下: usin ...