foreword
-
When v-for traverses, one parameter is each item value (item), two parameters are each item value and index (item, index), and three parameters * are each item value, index, subscript ( item, index, i).
-
When v-for iterates over objects, each item, index, subscript, has a value. Subscripts start at 0.
-
When v-for iterates over array objects, each item, index, has a value. The subscript has no value, and the index starts from 0.
-
When v-for iterates over numbers, each item, index, has a value. The subscript has no value, and the index starts from 0. It will report the same error as the above index, and it will not affect the use.
all codes
<template>
<div class="box">
<div class="son" v-for="(item, index, i) in data" :key="index">
<p>值：{
{ item }}</p>
<p>索引：--- {
{ index }}</p>
<p>下标：--- {
{ i }}</p>
<p>v-for遍历对象</p>
</div>
<div class="son" v-for="(item, index, i) in datae" :key="index">
<p>值：{
{ item }}</p>
<p>索引: --- {
{ index }}</p>
<p>下标: --- {
{ i }}</p>
<p>v-for遍历对象(有索引和下标形式)</p>
</div>
<div class="son" v-for="(item, index, i) in dataer" :key="index">
<p>值：{
{ item }}</p>
<p>索引: --- {
{ index }}</p>
<p>下标: --- {
{ i }}</p>
<p>v-for遍历数组对象</p>
</div>
<!-- 注释掉下面这一段报错就会没了 -->
<div class="son" v-for="(item, index, i) in 3" :key="index">
<p>值：{
{ item }}</p>
<p>索引：--- {
{ index }}</p>
<p>下标：--- {
{ i }}</p>
<p>v-for遍历数字</p>
</div>
<div class="title">
结论：
<p>
当v-for遍历的时候,<span>一个参数</span>是每一项值(item),<span>2个参数</span>是每一项值和索引(item,index),<span>3个参数</span>是每一项值,索引,下标(item,index,i)。
</p>
<p>当v-for遍历对象时,每一项，索引，下标，都有值。下标从0开始。</p>
<p>
当v-for遍历数组对象时,每一项，索引，有值。 下标没有值，索引从0开始。
</p>
<p>
当v-for遍历数字时,每一项，索引，有值。
下标没有值，索引从0开始，会跟上面的索引相同报错，不影响使用。
</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
id: 12,
name: "安康几十年",
conta: "jshbkj",
},
datae: {
10: { id: 6, name: "战三" },
你好: { id: 7, name: "ajsd" },
张三: { id: 8, name: "jskj" },
},
dataer: [
{ id: 3, name: "战三" },
{ id: 4, name: "ajsd" },
{ id: 5, name: "jskj" },
],
};
},
};
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 800px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
.son {
width: 33.33%;
height: 120px;
padding-top: 20px;
// background-color: skyblue;
border-bottom: 1px solid #ccc;
text-align: center;
p:last-child {
color: skyblue;
font-size: 18px;
}
}
.title {
font-size: 25px;
font-weight: 700;
p {
font-size: 18px;
margin: 10px 0;
span {
color: red;
}
}
}
}
</style>operation result
Generally, the array object data returned by the backend will have an index
This error is caused by traversing numbers, whose index is the same as 012 above, just comment it out, and it will not affect the use.
After this process, I believe you have a preliminary deep impression on Vue v-for traversal in detail, using the display file icon to search and change the style, but the situation we encounter in actual development is definitely different, so we have to understand Its principle remains unchanged. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen