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. 解决异地服务器接口访问跨域，node构建反向代理

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  2. JAVA多线程常用例子

    详情见该页面ttps://www.cnblogs.com/pureEve/p/6524366.html

  3. activity bj draw 流程图

  4. Hessian---java远程通讯 (zhuan)

    http://blog.csdn.net/harderxin/article/details/22669383 (zhuan)

  5. sudo安装某一文件报错：E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它？

    报错原因:资源被占用 解决方法: sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock

  6. [1]传奇3服务器源码分析一 LoginGate

    服务端下载地址: 点击这里 网上基本上都有分析该源码的分析详解,如:请点击该链接,但容易晕,而且也不全!所以才有了本文! 一.首先来看服务端的LoginGate源码 先来张图比较让人容易理解

  7. Python全栈-day11-函数3

    装饰器 1.开放封闭原则 通常情况下,软件一旦上线就应该遵循开放封闭原则,即对修改封闭.对扩展开放 扩展开放需遵循两个原则: 1)不修改源代码 2)不修改原函数的调用方式 2.装饰器 器指的是工具,装 ...

  8. pycharm python3.5 神奇的导入问题

    说明:pycharm目录中没有同名.py文件,则可以直接用import util导入: 若有同名.py文件,则导入的时候需要加入所在文件夹名称

  9. uvalive 3887 Slim Span

    题意: 一棵生成树的苗条度被定义为最长边与最小边的差. 给出一个图,求其中生成树的最小苗条度. 思路: 最开始想用二分,始终想不到二分终止的条件,所以尝试暴力枚举最小边的长度,然后就AC了. 粗略估计 ...

  10. Hive中实现group concat功能（不用udf）

    在 Hive 中实现将一个字段的多条记录拼接成一个记录: hive> desc t; OK id string str string Time taken: 0.249 seconds hive ...