Vue中列表渲染指令v-for的基本用法详解
作者：夏志121 发布时间：2024-05-28 15:52:06
标签：Vue,列表渲染,v-for
一、原理概述
v-for指令时在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用"就地复用"策略。如果数据项的数据被改变，Vue.js将不再移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并确保它在特定索引下显示已被渲染过的每个元素。
二、基本用法
v-for是Vue.js的循环语句，它的表达式需要结合着in或者of来使用，类似item in items的形式。
（1）v-for循环普通数组
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历数组</h2>
<div class="basic">
<p v-for="(item,index) in lists" :key="index">
{{index}}------{{item}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
lists:["java程序设计","android程序设计","php程序设计","呵呵呵"],
},
methods: {
}
})
</script>
</body>
</html>
执行结果：
在表达式中，lists是数组，item是当前一条数据，index代表当前索引值。列表渲染也可以用in来代替of作为分隔符。代码中还有一个key属性，key属性可以提高循环的性能。
（2）v-for循环对象
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
line-height: 30px;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历对象</h2>
<div class="basic">
<p v-for="(value,name,index) in car">
{{index}}-----{{name}}------{{value}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
car: {
name: "奥迪a8",
color: "黑色",
Number: "124215dhsdhsdf"
}
},
methods: {
}
})
</script>
</body>
</html>
执行结果：
（3）v-for循环对象数组
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历对象数组</h2>
<div class="basic">
<p v-for="(item,index) in persons">
{{index}}-----{{item.id}}-----{{item.name}}-----{{item.age}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
persons: [
{ id: "0001", name: "张三", age: "18" },
{ id: "0002", name: "李四", age: "18" },
{ id: "0003", name: "王五", age: "28" }
]
},
methods: {
}
})
</script>
</body>
</html>
执行结果：
（4）v-for迭代整数
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for迭代整数</h2>
<div class="basic">
<p v-for="count of 10">
{{count}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
})
</script>
</body>
</html>
执行结果：
来源：https://blog.csdn.net/m0_61961937/article/details/130275133
0
投稿猜你喜欢
- 逛到一个有意思的博客在里面看到一篇关于ValueError: invalid literal for int() with base 10错
1. ndarray的属性数组的属性反映了数组本身固有的信息。常用的查看数组属性的相关语法如下表格所示：属性名称属性解释ndarray.sh- pygame城市之战横版射击游戏,按上下左右方向箭头操作飞机。这是一个横板射击小游戏，在黑夜的城市上空，你将要操作一架飞机去射击敌机, * 效
- 在python中，用于数组拼接的主要来自numpy包，当然pandas包也可以完成。而，numpy中可以使用append和concatena
- 跳表跳表，又叫做跳跃表、跳跃列表，在有序链表的基础上增加了“跳跃”的功能，由William Pugh于1990年发布，设计的初衷是为了取代平
- 本篇文章主要内容代理类主要功能是将一个类实例的属性访问和控制代理到代码内部另外一个实例类，将想对外公布的属性的访问和控制权交给代理类来操作，
- 定义直接赋值：就是对象的引用（别名）浅拷贝（copy）：拷贝父对象，不拷贝对象内部的子对象深拷贝（deepcopy）：copy模块的deep
- 本文默认你的开发环境.数据库已经安装好想用使用数据库.我们需要现在pom文件中添加相应的依赖pom.xml<?xml version=
- 类的私有属性和方法Python是个开放的语言，默认情况下所有的属性和方法都是公开的 或者叫公有方法，不像C++和 Java中有明确的publ
- Python是一种非常富有表现力的语言。它为我们提供了一个庞大的标准库和许多内置模块，帮助我们快速完成工作。然而，许多人可能会迷失在它提供的
- 前言 MySQL 5.5版本之前默认的复制是异步(Asynchronous )模式的, MySQL 5
- 1. 文件注释File -> settings -> Editor -> File and Code Templates
- tensorflow下设置使用某一块GPU（从0开始编号）：import osos.environ["CUDA_DEVICE_OR
- 匿名管道管道是一个单向通道,有点类似共享内存缓存.管道有两端,包括输入端和输出端.对于一个进程的而言,它只能看到管道一端,即要么是输入端要么
- 本文实例讲述了python实现合并多个list及合并多个django QuerySet的方法。分享给大家供大家参考，具体如下：在用pytho
- 一、日志级别1. 级别定义logging模块提供了5种日志级别，分别为：CRITICAL>ERROR>WARNING>IN
- 似乎讨论分页的人很少，难道大家都沉迷于limit m,n?在有索引的情况下，limit m,n速度足够，可是在复杂条件搜索时，where s
- 说明1、Task是Future的子类，Task是对协程的封装，我们把多个Task放在循环调度列表中，等待调度执行。2、Task对象可以跟踪任
- 导语之前有很多小伙伴说想学习一下多线程图片下载器，虽然好像已经过去很久了，不过还是上来安排一波吧。至于题目为什么说是构建一个小型数据集，因为
- K线数据提取依据原有数据集格式，按要求生成新表:1、每分钟的close数据的第一条、最后一条、最大值及最小值，2、每分钟vol数据的增长量（
