使用v-for指令渲染列表
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指令渲染列表的更多相关文章
- vue入门：（v-for指令与列表渲染）
v-for渲染列表 维护状态 数组变异方法与替换数组 $set.$remove 对象属性实现列表渲染 一.v-for渲染列表 语法:v-for="item in items" 先来 ...
- 前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- vue v-nav指令属性列表
v-nav指令属性列表 属性名 属性描述 类型 必选 默认 title 导航栏标题 String No 空字符串 showBackButton 是否显示(左边的)返回按钮 Boolean No fal ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
- vue2——指令渲染，{{}}渲染
博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能
1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块 修改了start 脚本 nodemo ...
随机推荐
- 【Java】-NO.16.EBook.4.Java.1.008-【疯狂Java讲义第3版 李刚】- 集合/容器
1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.008-[疯狂Java讲义第3版 李刚]- 集合 Style:EBook Series:Java Si ...
- js模拟队列----小优先队列
队列:先进先出,后进后出 var Queue = (function(){ var item = new WeakMap(); class Queue{ constructor(){ item.set ...
- TL-WAR1200L V1.0升级软件20170609
TL-WAR1200L_V1.0升级软件20170609.part1.rar TL-WAR1200L_V1.0升级软件20170609.part2.rar TP-LINK WVR& ...
- PHP的数组合并
1. array_merge 字符索引:后面的覆盖前面的. 如果输入的数组中有相同的字符串键名,则该键名后面的值将覆盖前一个值. 混合索引:如果数组包含数字键名,后面的值将不会覆盖原来的值,而是附加到 ...
- Linux性能优化gprof使用
gprof用于分析函数调用耗时,可用之抓出最耗时的函数,以便优化程序. gcc链接时也一定要加-pg参数,以使程序运行结束后生成gmon.out文件,供gprof分析. gprof默认不支持多线程程序 ...
- vue2.0leaflet
github源码在此,记得点星:https://github.com/brandonxiang/vueleaflet 参考文档:https://korigan.github.io/Vue2Leafle ...
- InstallShield2015制作安装包----------卸载后删除安装目录和文件
卸载程序后,一般是需要将安装目录清除干净.但是,如果程序运行中有文件生成,这时InstallShield自带的卸载程序,不会卸载这些运行时生成的文件. 卸载不干净,可能会对下次程序的安装,和安装后的运 ...
- redis_bj_01
windows下安装redis 下载地址https://github.com/dmajkic/redis/downloads.下载到的Redis支持32bit和64bit.根据自己实际情况选择,我选择 ...
- Android -- RecyclerView实现左滑删除
1,在实际项目中我们常常有对一个列表进行滑删除操作,使用我们昨天的ItemTouchHelper其实也可以实现简单的实现这个功能,先来看一下使用ItemTouchHelper来实现的效果: 2,从上面 ...
- MySQL编码问题探究
占个坑. 今天在向本机搭建的MySQL数据库插入中文的时候报错了. 使用 show variables like 'char%'; 及 show variables like 'collation%' ...