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 简明教程 --- 17,Python 模块与包
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 正确的判断来源于经验,然而经验来源于错误的判断. -- Fred Brooks 目录 我们已经知道函 ...
- 深入理解JVM(③)虚拟机的类加载器(双亲委派模型)
前言 先解释一下什么是类加载器,通过一个类的全限定名来获取描述该类的二进制字节流,在虚拟机中实现这个动作的代码被称为"类加载器(Class Loader)". 类与类加载器 类加载 ...
- spring quartz 每30分钟执行一次cronExpression表达式怎么写
<cron-expression>0 0/30 * * * ?</cron-expression>:每隔30分钟 <cron-expression>0 0/15 ...
- Spring — 循环依赖
读完这篇文章你将会收获到 Spring 循环依赖可以分为哪两种 Spring 如何解决 setter 循环依赖 Spring 为何是三级缓存 , 二级不行 ? Spring 为啥不能解决构造器循环依赖 ...
- 利用搭载好的工控机环境跑yolov3-tiny
辛辛苦苦搭载好GPU环境现在要开始测试下效果 1,准备好数据集 2,测试开始 (1),如果尚未安装Darknet,则应先进行安装 git clone https://github.com/pjredd ...
- How many ways?? HDU - 2157 矩阵快速幂
题目描述 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, 葱头决定, 每次上课都走不同的 ...
- Django---进阶14
目录 登陆功能 首页搭建 admin后台管理 用户头像展示 图片防盗链 个人站点 侧边栏筛选功能 登陆功能 def login(request): if request.method == 'POST ...
- 邓布利多拍了拍你,并递来一份CSS魔法
校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...
- Linux多任务编程之三:exec函数族及其基础实验(转)
来源:CSDN 作者:王文松 转自:Linux公社 exec函数族 函数族说明 fork() 函数用于创建一个新的子进程,该子进程几乎复制了父进程的全部内容,但是,这个新创建的子进程如何执行呢?e ...
- day69 cookie与session
目录 一.forms源码解析 二.cookie与session发展史 三.cookie操作 四.session操作 五.CBV如何添加装饰器 一.forms源码解析 # from组件的切入点是is_v ...