v-for的四种使用方式

1、数组

在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。
（1）先在data中定义数组

arr: [1, 2, 3, 4, 5],

（2）在标签中遍历

<p v-for="(item,index) in arr">数值：{{item}}，索引：{{index}}</p>

2、在对象数组

对象数组，其实说到底也是数组，使用方式上和数组一模一样。
（1）先在data中定义数组

objArr: [{id: 1,name: "Q"},{id: 2,name: "W"},{id: 3,name: "E"},{id: 4,name: "R"},
],

（2）在标签中遍历

<p v-for="item in objArr">id:{{item.id}}--------name:{{item.name}}</p>

3、对象

对象不同于数组，遍历的大多数是关键字和值，即key和val，虽然对象也有索引值，但是一般都用不到。
（1）先在data中定义对象

 obj: {id: "100",name: "qwer",sex: "male"}

（2）在标签内遍历

<p v-for="(val,key,i) in obj">值：{{val}},键：{{key}}，索引：{{i}}</p>

4、迭代数字

和数组、对象数组、对象不同的是，迭代数字更加纯粹，看起来更像是为了循环而循环，不需要任何定义，直接在标签中使用，并且count是从1开始的。

<p v-for="count in 10">这是第{{count}}次循环</p>

总结

v-for的四种使用方式没有优劣，主要看使用场景和需求选择。

v-for的四种使用方式相关推荐

Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
Java的四种引用方式
Java的四种引用方式 java内存管理分为内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java对象的引用包括强引用,软引用,弱引用,虚引用 Jav ...
[转][Android]Android数据的四种存储方式
android.database.sqlite 类 SQLiteQueryBuilder java.lang.Object android.database.sqlite.SQLiteQueryBui ...
Android开发之入门基础篇--拨号器的四种实现方式
整理之前的学习笔记,发现了很多在学习Android基础的过程中的一些很适合一些新手开发的代码,想想之前也是一步一个脚印,一行一行的代码敲出来的,虽然这些代码很简单,但是里面的编程思路却是很有学习意义的 ...
Siege压力测试工具的安装及使用+python flask的四种wsgi方式对比
文章目录一.前言: 如果要支持https 二.安装使用: 文件备份: 1.mac安装: 2.linux 安装:[centos 服务器] 通用Linux安装: 3.window安装: 4.测试百度: ...
JAVA四种引用方式
JAVA四种引用方式: java.lang.ref: 强引用(直接变量赋值) 软引用(SoftReference): 只有在要发生OOM错误之前才会回收掉老的软引用对象,应用场景主要防止内存溢出.(缓 ...
矩阵乘法的四种理解方式
先介绍向量的两种运算,一个行向量乘以一个列向量称作向量的内积,又叫作点积,结果是一个数: 一个列向量乘以一个行向量称作向量的外积,外积是一种特殊的克罗内克积,结果是一个矩阵, 假设和b分别是一个行向量 ...
【Android】android开发之splash闪屏页的四种实现方式，启动页的实现教程。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页: https://github.com/QQ986945193 新浪微博:http://w ...
sqlserver的四种分页方式
第一种:ROW_NUMBER() OVER()方式 select * from ( select *, ROW_NUMBER() OVER(Order by ArtistId ) AS RowId f ...
【Python基础】Python爬虫的两套解析方法和四种信息提取方式
Python爬虫 Author:Iouwill Machine Learning Lab 分享一篇往日旧文章,非常实用. 对于大多数朋友而言,爬虫绝对是学习python的最好的起手和入门方式.因为爬虫 ...

v-for的四种使用方式

v-for的四种使用方式

v-for的四种使用方式

1、数组

2、在对象数组

3、对象

4、迭代数字

总结

v-for的四种使用方式相关推荐

最新文章

热门文章