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. 19-Python3 函数

    def area(width,heigh): return width*heigh def print_wecome(name): print('welcome',name) print('Runoo ...

  2. selenium及webdriver的原理【转】

    selenium与webdriver整合后,形成的新的测试工具叫做selenium2.x.在selenium1时间,selenium使用javascript来达到测试自动化的目标. 1. seleni ...

  3. iOS UI进阶-4.0 地图与定位

    在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院   在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...

  4. dotnet 命令

    以下用实例串起dotnet常用命令,带你玩转dotnet命令. 1．创建(dotnet new) 首先我们创建一个项目,这里我们创建控制台程序,命令如下图所示. dotnet new dotnet n ...

  5. VS2010 正在创建“Debug\test2.unsuccessfulbuild”，因为已指定“AlwaysCreate”。

    问题一:VS2010  正在创建“Debug\test2.unsuccessfulbuild”,因为已指定“AlwaysCreate”. 方法解决: The relevant setting is i ...

  6. LeetCode28.实现strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

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

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

  8. C# 基于DocumentFormat.OpenXml的数据导出到Excel

    using DocumentFormat.OpenXml; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.S ...

  9. c#如何解析时区字符串

    常见时区缩写可参考: http://time.123cha.com/knowledge/6.html 常见时区缩写如下: IDLE +12:00 国际日期变更线,东边  NZDT +13:00 新西兰 ...

  10. [16]Windows内核情景分析 --- 服务管理

    随时可以看到任务管理器中有一个services.exe进程,这个就是系统的服务控制管理进程,简称SCM 这个进程专门用来管理服务(启动.停止.删除.配置等操作) 系统中所有注册的服务都登记在\HKEY ...