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 ...
随机推荐
- web之robots.txt
什么是roots协议 robots协议也叫robots.txt(统一小写)是一种存放于网站根目录下的ASCII编码的文本文件,它通常告诉网络搜索引擎的漫游器(又称网络蜘蛛),此网站中的哪些内容是不应被 ...
- 入门大数据---Spark车辆监控项目
一.项目简介 这是一个车辆监控项目.主要实现了三个功能: 1.计算每一个区域车流量最多的前3条道路. 2.计算道路转换率 3.实时统计道路拥堵情况(当前时间,卡口编号,车辆总数,速度总数,平均速度) ...
- linux crontab 定时任务 邮件问题 及其相关的 dead.letter 问题
最近开发项目的时候发现公司服务器用root账号登录的时候 一直会提示有新的信件,一直提示一直提示. 联想到另一台服务器上 的dead.letter文件每天都不断的变大 而且在 root家目录里 ,系 ...
- c# 线程的优先级
前言 有时候我们希望某个线程更加重要,希望让其先运行的话.c#为我们提供了线程修改优先级.但是这样的效果有多大呢? 正文 直接放代码: static void Main(string[] args) ...
- DBMS_METADATA.GET_DDL查出不存在的列SYS_C00014_20070116:47:09$
DBMS_METADATA.GET_DDL查出不存在的列SYS_C00014_20070116:47:09$ 前言 很久很久以前,有多久呢? 有多久了,等等我看下截图的日期(溜︿( ̄︶ ̄)︿). 哦, ...
- 初步了解JVM
先看一眼JVM虚拟机运行时的内存模型: 1.方法区 Perm(永久代.非堆) 2.虚拟机栈 3.本地方法栈 (Native方法) 4.堆 5.程序计数器 1 首先的问题是:jvm如何知道那些对象需要回 ...
- 返回报文变成xml格式了!
首先,google chrome之前有安装jsonview插件: 然后,自己弄springCloud项目,搭建eureka后,访问url发现返回报文变成xml格式了,一通摸索及查找,现整理如下: 1. ...
- 代码文件编码unicode 无标签, 导入vs项目编译不过的问题
很多人经常需要把代码分别在linux.windows上编译.在linux中gcc编译的时候,文件格式为utf-8无bom格式,可是如果将文件拿到windows上,用vs编译的时候,发现各种报错,且都是 ...
- Form表单,textarea标签输入框 字数限制,和已输入字数的统计显示
<script type="text/javascript"> $(document).ready(function() { <%-- 页面进来时就调用 --%& ...
- day30 继承、派生与多态,类中方法和内置函数
目录 一.多继承出现的问题(mixins机制) 二.派生与方法重用 三.多态 1 什么是多态 2 为什么要有多态 3 python中多态的鸭子类型 四.绑定方法与非绑定方法 1 绑定方法 1.1对象的 ...