Vue for v-for
内容来自于网络：
Vue for v-for
2.x版本：
v-for="(item,index) in items"
index即索引值。
====================================================
理解v-for="( item, index) in items"的基本用法?：
v-for是Vue中的一个指令，用于基于源数据多次渲染元素或模板块。在v-for="(item, index) in items"中，items是一个数组或对象，item是当前迭代到的元素的值，index是当前迭代到的元素的索引（位置）。
====================================================
使用v-for="(item, index) in items"就可以将数组或对象中的数据循环输出。
JavaScript：
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
users: [ 将数组 中的数据循环
{ name: 'lee', password: '123456' },
{ name: 'zhangsan', password: '654321' },
{ name: 'lisi', password: '111111' },
],
usersObj: { 将对象中的数据循环
lee: '123456',
zhangsan: '654321',
lisi: '111111'
}
}
})
HTML：
<div id="app">
<ul>
<li v-for="(item, index) in users" :key="index">
{{index}}.
用户名：{{item.name}}
密码：{{item.password}}
</li>
</ul>
<ol>
<li v-for="(value, key) in usersObj" :key="index">
用户名：{{key}}
密码：{{value}}
</li>
</ol>
</div>
原文链接：https://blog.csdn.net/chencl1986/article/details/84844061
====================================================
v-for指令循环字符串、数字
v-for指令除了常规循环数组、对象外，还可以循环字符串和数字，需要注意的是，循环数字时默认从1开始。
JavaScript：
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
str: 'Vuejs Tutorial'
}
})
HTML：
<div id="app">
<ul>
<li v-for="(item, index) in str" :key="index"> 循环字符串
{{item}}
</li>
</ul>
<ul>
<li v-for="index in 10" :key="index"> 循环数字，循环数字时默认从1开始。
{{index}}
</li>
</ul>
</div>
原文链接：https://blog.csdn.net/chencl1986/article/details/84844061
====================================================
两种方式
第一种方式
通过 v-for 指令可以从数组中循环获取数据并渲染，语法格式如下：
v-for="item in list"
item 表示当前正在遍历的对象；
in 是固定语法，表示对 list 数组进行遍历；
list 表示被遍历的数组。
第二种方式
还有另外一种遍历方式，可额外获取当前索引下标。语法格式如下：
v-for="(item, index) in list" :key="index"
其中，index 为被遍历数组的当前索引值。:key="index" 可为每项提供一个唯一 key 属性，目的是为了方便的跟踪每个节点，这对重用和重新排列现有元素非常有帮助。
注：
在遍历数组时可以在元素中绑定一个key，key=数组值
绑定key的作用 ：
主要是为了高效的更新虚拟DOM。(vue内部；让性能高一点)
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，则Diff算法默认执行起来是比较复杂的。(一个个重新替换)但绑定key后，可以使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
例
<template>
<div>
<div v-for="index in 5" :key="index">
{{ index }}
</div>
</div>
</template>
v-for遍历数组
1. 仅使用项
如果你不需要索引，可以只获取当前项。
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
};
}
};
</script>
在这个例子中，v-for="item in items" 表示我们只获取了数组中的每一项（item）。同样，:key="item.id" 确保了每个列表项都有一个唯一的键值。
呈现：
上面的id是作为key属性的值自动添加的，Vue使用这个id来跟踪每个列表项的状态和身份。在实际的Vue应用中，你通常不会看到这些id直接显示在渲染的HTML中，因为它们是Vue内部使用的。但是，它们对于Vue的DOM更新算法来说是非常重要的，因为它们帮助Vue识别哪些元素改变了、添加了或者被移除了。
2. 使用索引和项
这种方式在遍历数组时同时提供了当前项（item）和它的索引（index）。
例子：
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }}: {{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
};
}
};
</script>
在这个例子中，v-for="(item, index) in items" 表示我们同时获取了数组中的每一项（item）和它的索引（index）。:key="item.id" 确保了每个列表项都有一个唯一的键值。
呈现:
渲染效果分析
这段Vue代码会在页面上渲染出一个包含三个列表项的无序列表，每个列表项显示数组items中对象的索引和名称。渲染的是一个无序列表（<ul>），并且列表项的索引从0开始。
<ul>
<li>0: Apple</li>
<li>1: Banana</li>
<li>2: Cherry</li>
</ul>
为何为无序列表 (<ul>)?
HTML结构：在Vue模板中，我们使用了<ul>标签来定义列表的容器。在HTML中，<ul>代表无序列表，这意味着列表项不会自动编号。
Vue.js 渲染：Vue.js 通过将模板编译成渲染函数，然后根据组件的响应式数据生成虚拟DOM。在这个过程中，Vue.js 会将<ul>和<li>标签转换为虚拟节点，然后这些虚拟节点会被渲染成实际的DOM元素。
为何从0开始?
JavaScript 数组索引：在JavaScript中，数组索引是从0开始的。这意味着数组的第一个元素的索引是0，第二个元素的索引是1，依此类推。在Vue.js的v-for指令中，当使用(item, index) in items语法时，index变量会自动被设置为当前数组元素的索引，这就是为什么列表项的索引从0开始。
Vue.js 渲染：在模板中，我们使用了插值表达式{{ index }}来显示每个列表项的索引。由于索引是从0开始的，所以渲染出来的列表项也会从0开始显示。
v-for遍历对象
键（key）：是对象属性的名称，用于唯一标识对象中的每个条目。在对象字面量中，键通常是由字符串或符号组成的，它们是不可变的且唯一的。
值（value）：与每个键相关联的数据。值可以是任何类型，包括数字、字符串、对象、数组等。
1.只遍历对象的值
用value值
在Vue中使用v-for遍历对象时，与数组不同，对象并没有默认的“索引”概念。对象的键（keys）通常用作唯一标识符，因此在使用v-for遍历对象时，应该使用对象的键作为key值。
<template>
<div>
<ul>
<li v-for="value in object" :key="value">
{{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
a: 'Apple',
b: 'Banana',
c: 'Cherry'
}
};
}
};
</script>
呈现：
这里，v-for="value in object" 会遍历对象的所有值。
由于对象的键不用于渲染，因此没有提供键值。在这种情况下，Vue会使用默认的键值，即数组索引。
每个列表项显示对象的值。
2.遍历对象的键和值
遍历对象属性和属性值 用value值和key
<template>
<div>
<ul>
<li v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
name: 'Vue.js',
version: '2.6.12',
creator: 'Evan You'
}
};
}
};
</script>
呈现：
分析：
v-for="(value, key) in object" 会遍历对象的每一对键值对。
:key="key" 使用对象的键作为唯一键值，这对于Vue的虚拟DOM差异比较算法是必要的。
每个列表项显示对象的键和值。
3.遍历对象的键、值和索引
遍历对象属性和属性值和索引 用value值、key和index
<template>
<div>
<ul>
<li v-for="(value, key, index) in object" :key="key">
{{ index }}: {{ key }} - {{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
first: 'Apple',
second: 'Banana',
third: 'Cherry'
}
};
}
};
</script>
呈现：
分析：
v-for="(value, key, index) in object" 会遍历对象的每一对键值对，并且提供索引。
:key="key" 使用对象的键作为唯一键值。
每个列表项显示对象的索引、键和值。
————————————————
原文链接：https://blog.csdn.net/2301_80089510/article/details/141644613
====================================================
使用Object.keys()、Object.values()或Object.entries()
这些方法可以帮助我们获取对象的键、值或键值对，然后通过v-for指令进行遍历。
====================================================
浙公网安备 33010602011771号