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 ...
随机推荐
- 《UNIX环境高级编程》(APUE) 笔记第一章 - UNIX基础知识
1 - UNIX基础知识 Github 地址 1. 操作系统 可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.通常将这种软件称为 内核 (kernel) .( Linux 是 GN ...
- 2020-06-30 pol实现execl导入导出
1.导入依赖 <!-- 解析表格 --> <dependency> <groupId>org.apache.poi</groupId> <arti ...
- Spring Aware介绍
读完这篇文章你将会收获到 Aware 的使用和介绍 BeanFactoryAware 的触发时机 ApplicationContextAware 的触发时机以及它通过扩展 BeanPostProces ...
- 看看有哪些 Web 认证技术.
BASIC 认证 BASIC 认证(基本认证)是从 HTTP/1.0 就定义的认证方式. BASIC 认证会将"用户名:密码"经过 Base64 加密后放入请求头部的 Author ...
- Drozer简单使用
1.Drozer简介 Drozer是一款针对Android系统的安全测试框架.Drozer可以通过与dalivik VM交互.与其他应用程序的IPC端点交互.与底层操作系统的交互,来避免正处于开发 ...
- 奇妙的 CSS MASK
本文将介绍 CSS 中一个非常有意思的属性 mask . 顾名思义,mask 译为遮罩.在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 ...
- vue页面原样导出excel表格
github地址:https://github.com/wuzhiaite/vue-samples 1.excel导出 做过业务系统的知道,进行涉及到excel的导出,列表数据动则几十万,但是也有一部 ...
- 小程序爬坑(一)之时间格式IOS的兼容
new Date()传参差异化问题 在安卓系统中,直接传入标准格式字符串,就可以转换为Date格式数据 在苹果系统中不支持ISO-8601标准格式的时间字符串 IOS在使用new Date()创建日期 ...
- springBoot整合redis(作缓存)
springBoot整合Redis 1,配置Redis配置类 package org.redislearn.configuration; import java.lang.reflect.Method ...
- Creator填色游戏的一种实现方案
前言 先上一个辛苦弄出来的gif效果.写公众号时间不长,很多技巧还在慢慢跟小伙伴学习.可关注公众号,回复"绘图"或者"填色"都可获得demo的git地址.请使用 ...