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. zhaoyin

    1.什么时候用到事务,单个update操作会用到事务吗? 银行转账 /**//*--使用事务--*/ use stuDB go --恢复原来的数据 --update bank set currentM ...

  2. Photobucket不能用了怎么办？推荐10个在线图片储存服务！

    近日,图片共享服务网站Photobucket更新了政策,要求用户缴纳399美元的年费,才能使用第三方网站图片储存服务. 由于Photobucket出台这一政策,亚马逊及其他电商平台上相关的产品图片已被 ...

  3. jQuery发布1.9正式版，最后支持IE 6/7/8

    jQuery 于 2013/1/15 正式发布了 1.9 版本,这个版本最值得关注的,不是又增加了什么新功能,而是它去掉了哪些东西!jQuery 1.9 删除和改动了不少过时的 API,升级后可能会导 ...

  4. mac 下 IntelliJ IDEA 快捷键

    编辑器 Cmd + N // 代码生成,getter, setter Opt + Enter // 导入类或者注解

  5. java资料共享

    1.javascript视频教程 链接: http://pan.baidu.com/s/1gd57FVH 密码: d9ei 2.JPA视频教程 链接: http://pan.baidu.com/s/1 ...

  6. Js闭包学习笔记

    好多内容摘抄了大神的博客内容,只为分享记录.如有冒犯,请见谅 参考文章 http://www.cnblogs.com/libin-1/p/5962269.html http://www.cnblogs ...

  7. centos安装java的jdk

    1.下载 jdk-8u101-linux-x64.rpm http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads- ...

  8. ruby中的alias和alias_method

    ruby中的alias和alias_method都可以重命名一个方法,它们的区别如下: 1.alias是ruby的一个关键字,因此使用的时候是alias :newname :oldname alias ...

  9. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  10. Cacti的使用

    前期准备 SNMP的安装,控制机和被控机,以及被控机的配置 1.SNMP的安装参考:http://www.cnblogs.com/smallcoderhujin/p/3785731.html 2.被控 ...