vue学习(十) v-for循环普通数组 、对象数组、 迭代数字
//html
<div id="app">
<p v-for="item in list">{{item}}</p>
<p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
<p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
<p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>
//遍历对象身上的属性和值,除了有key value 在第三个位置上还有一个索引
<p v-for="(key,value,i) in user">键是{{key}}---值是{{value}}---索引是{{i}}</p>
//迭代数字 迭代从1开始
<p v-for="count in 10">这是第{{count}}次循环</p>
</div> //script
<script>
var vm = new Vue({
el:'app',
data:{
list:[1,2,3,4,5,6,7],
list2:[
{ id:1, name:'小白' },
{ id:2, name:'小黑' },
{ id:3, name:'小黄' }
],
user:{
id:1,
name:'小红',
gender:'女'
}
},
methods:{//methods中定义了当前vue实例中所有可用的方法
}
})
</script>
vue学习(十) v-for循环普通数组 、对象数组、 迭代数字的更多相关文章
- JS对象 Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的
Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...
- javascript数组/对象数组的深浅拷贝问题
一.问题描述 在项目里的一个报名页面需要勾选两条信息(信息一和信息二),由于信息一和信息二所拥有的数据是一致的,所以后台只返回了一个对象数组,然后在前台设置了两个List数组来接收并加以区分.原型如下 ...
- vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法
//html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...
- vue学习(十九) 生命周期 了解
生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...
- vue学习(十八)使用自定义指令 为字体渲染颜色
<div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...
- vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
<div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏
//html <div id="app"> <input type="button" value="toggle" @cl ...
- java对象数组的概述和使用
1 public class Student 2 { 3 // 成员变量 4 private String name; 5 private int age; 6 7 // 构造方法 8 public ...
随机推荐
- Python 简明教程 --- 19,Python 类与对象
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 那些能用计算机迅速解决的问题,就别用手做了. -- Tom Duff 目录 上一节 我们介绍了Pyt ...
- 入门大数据---Kafka简介
一.简介 ApacheKafka 是一个分布式的流处理平台.它具有以下特点: 支持消息的发布和订阅,类似于 RabbtMQ.ActiveMQ 等消息队列: 支持数据实时处理: 能保证消息的可靠性投递: ...
- 字符串String和list集合判空验证
1`字符串判断处理: 结论: 当if判断条件为两个,并且它们两个为或的关系,如果第一个条件为false,则继续第二个条件的判断:如果第一个条件为true,该例子不足以说明是否判断第二个条件, 最终可以 ...
- Java synthetic
读完这篇文章你将会收获到 synthetic fields synthetic method synthetic class 概述 上一篇 Java 枚举 提及到编译成 class 文件之后.编译器会 ...
- NOIP 2016 洛谷 P2827 蚯蚓 题解
题目传送门 展开 题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手 ...
- Java基础笔记01-02-03-04
一.今日内容介绍 1.Java开发环境搭建 2.HelloWorld案例 3.注释.关键字.标识符 4.数据(数据类型.常量) 01java语言概述 * A: java语言概述 * a: Java是s ...
- 深度学习论文翻译解析(九):Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition
论文标题:Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition 标题翻译:用于视觉识别的深度卷积神 ...
- H3c实验室-(OSPF,Nat,STP,Dhcp,Acl)v.1)
实验声明 本实验纯属学习记录性质,如有错误,请大哥帮忙提出,马上改正谢谢~还有学习H3c心态要好,他有超级多的bug!!!! 实验介绍 实验条件 实验开始 把图设计好 先说明一下RTA-RTB的线路是 ...
- .net面试技术要点总结
[整理]待毕业.Net码农就业求职储备 本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些 ...
- 【js】栈方法和队列方法
栈方法:后进先出,推入(push)和弹出(pop):push("**")返回数组长度,pop()返回弹出的项. var colors = new Array(); // 创建一个数 ...