@TOC
注意
需要特别注意的是，在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>
在这里插入图片描述
