注意
需要特别注意的是，在Vue3中，使用v-for需要制定key值，为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。建议尽可能在使用 v-for 时提供 key。
<li v-for="site in sites" :key="site.id">
单参数迭代
最简单的就是v-for：“site in sites”， sites 是源数据数组，将site作为迭代器，遍历sites中的text。
<template>
<div id="test">
<ol>
<li v-for="site in sites" :key="site.id">
{
{site.text}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
sites: [
{
text: 'Google' },
{
text: 'Runoob' },
{
text: 'Taobao' }
],
};
},
};
</script>
多参数迭代
使用双参数迭代，(site,index) in sites，site.text可以遍历sites中的text，而index则可以用于计数。
<template>
<div id="test">
<ol>
<li v-for="(site,index) in sites" :key="site.id">
{
{index}} {
{site.text}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
sites: [
{
text: 'Google' },
{
text: 'Runoob' },
{
text: 'Taobao' }
],
};
},
};
</script>
迭代遍历对象
v-for 可以通过一个对象的属性来迭代数据，
单参数迭代：
<template>
<div id="test">
<ul>
<li v-for="value in class" v-bind:key="value.id">
{
{value}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
class:{
name:'math',
num:'301',
grade:'3'
}
};
},
};
</script>
多参数迭代：
<template>
<div id="test">
<ul>
<li v-for="(value,key) in classList" v-bind:key="value.index">
{
{key}}:{
{value}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
classList:{
name:'math',
num:'301',
grade:'3'
}
};
},
};
</script>
联合使用v-for/v-if
联合使用 v-for/v-if 给 select 设置默认值：
<template>
<div id="test">
<select @change="changeVal($event)" v-model="selOption">
<template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
<!-- 索引为 1 的设为默认值，索引值从0 开始-->
<option v-if = "index == 1" :value="site.name" selected>{
{site.name}}</option>
<option v-else :value="site.name">{
{site.name}}</option>
</template>
</select>
<div>您选中了:{
{selOption}}</div>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
selOption: "Runoob",
sites: [
{
id:1,name:"Google"},
{
id:2,name:"Runoob"},
{
id:3,name:"Taobao"},
]
}
},
methods:{
changeVal:function(event){
this.selOption = event.target.value;
alert("你选中了"+this.selOption);
}
}
}
</script>
