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-argparse模块-获取命令行参数
#!/usr/bin/python3 """ Author : Jet Bi License : www.cyeap.com Summary : 获取命令行的参数 Not ...
- 一不小心,我就上传了 279674 字的 MySQL 学习资料到 github 上了
自从2019年11月我们出版了<千金良方--MySQL 性能优化金字塔法则>一书之后,持续不断有人来询问我MySQL 4 个系统字典库相关的问题,因为篇幅原因,书中并没有完整收录4个字典库 ...
- 入门大数据---通过Flume、Sqoop分析日志
一.Flume安装 参考:Flume 简介及基本使用 二.Sqoop安装 参考:Sqoop简介与安装 三.Flume和Sqoop结合使用案例 日志分析系统整体架构图: 3.1配置nginx环境 请参考 ...
- python+opencv实现图像缩放
x, y = img_.shape[0:2] img_ = cv2.resize(img_, (int(y/2), int(x/2))) 实现图像长宽缩小为原来的一半
- webpack的入门实践,看这篇就够了
webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 ...
- 学习Java的Day02
知识点 数组: 一维数组 声明: 类型[] 数组名;([] 在前后没有影响,一般写在名称前.) 创建数组 数组名 = new 类型[数组长度]. 数组索引从0开始.获取数组长度:数组名.len ...
- 堆、栈、数据区、bss、代码段
一个程序的运行是需要内存的,那么我们平常写的程序的内存都是怎么分配的呢 (1)首先我们要知道,内存是真实存在的,内存是一个物理器件.它时由操作系统管理的,我们平常只要使用它就行了,为了方便管理.操作系 ...
- 机器学习之KNN算法(分类)
KNN算法是解决分类问题的最简单的算法.同时也是最常用的算法.KNN算法也可以称作k近邻算法,是指K个最近的数据集,属于监督学习算法. 开发流程: 1.加载数据,加载成特征矩阵X与目标向量Y. 2.给 ...
- win10 64位 MySQL 8.0 下载与安装
免安装版(超级棒的教程): 安装只需 Download .zip压缩文件 卸载只需 Delete 解压文件即可 https://blog.csdn.net/hzxOnlineOk/article/de ...
- Redundant Paths 分离的路径【边双连通分量】
Redundant Paths 分离的路径 题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields ...