Vue循环语句的若干用法

注意

需要特别注意的是，在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>