Table of contents
1. Principle overview
The v-for instruction is implemented in the code generation phase of template compilation, and the list rendering instruction v-for needs to be used when traversing arrays or objects. When Vue.js uses v-for to update the list of rendered elements, it uses the "in-place reuse" strategy by default . If the data of the data item is changed, Vue.js will no longer move the DOM element to match the change of the data item, but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index. element.
2. Basic usage
v-for is a loop statement of Vue.js, and its expression needs to be used in combination with in or of, similar to the form of item in items .
(1) v-for loop ordinary array
Example:
<!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>Results of the:
In the expression, lists is an array , item is the current piece of data , and index represents the current index value . List rendering can also use in instead of of as a separator. There is also a key attribute in the code, which can improve the performance of the loop .
(2) v-for loop object
Example:
<!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>Results of the:
(3) v-for loop object array
Example:
<!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>Results of the:
(4) v-for iteration integer
Example:
<!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>Results of the:
