使用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 ...
随机推荐
- 开发中清除css加载的缓存使用
- ie8以下兼容圆角等css3的属性
<!--[if lt IE 10]> <script type="text/javascript" src="PIE.js"></ ...
- seq2seq和attention应用到文档自动摘要
一.摘要种类 抽取式摘要 直接从原文中抽取一些句子组成摘要.本质上就是个排序问题,给每个句子打分,将高分句子摘出来,再做一些去冗余(方法是MMR)等.这种方式应用最广泛,因为比较简单.经典方法有Lex ...
- numpy中np.c_和np.r_
np.r_:按列连接两个矩阵,就是把两矩阵上下相加,要求列数相等,类似于pandas中的concat() np.c_:按行连接两个矩阵,就是把两矩阵左右相加,要求行数相等,类似于pandas中的mer ...
- 监督学习之knn算法
1.1 KNN(K-Nearest Neighbor)工作原理: 存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类对应的关系.输入没有标签 ...
- 带下拉列表的TextBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 比较两种方式的form请求提交
[一]浏览器form表单提交 表单提交, 适用于浏览器提交.像常见的pc端的网银支付,用户在商户商城购买商品,支付时商家系统把交易数据通过form表单提交到三方支付网关,然后用户在三方网关页面完成支付 ...
- 增删改（DML）操作
增删改(DML)操作 1.1事务(transaction) 事务是数据库操作的最小单元,又ACID的特性,应该保证一个事务的sql语句要么同时成功,要么都不成功. Mybatis中配置了事务管理器,t ...
- 笔记 : WampServe加装PHP版本（7.2.3）为例
1.由于正在学习Laravel框架,服务器wamp,Composer已搭建完成,但在安装laravel installer之后使用laravel new blog,报错为"This pack ...
- ****************VS编码操作实践******************
下面是今天主要练习的内容: 运用到的内容有 {运算符.强制转换.数据类型的运用.转义字符.变量与常量.基本类型的转换等} 1) 首先我们来看 下列的编码是由三大类组成的 ① 定制变量与常量 蓝色部 ...