Vue.js循环语句

循环语句使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

v-for 实例：

<div id=“app”>
<ol>
<li v-for=“site in sites”>
{{ site.text }}
li>
ol>
div>
<script>
const app = {
data（） {
return {
sites： [
{ text： 'Google' }，
{ text： 'Runoob' }，
{ text： 'Taobao' } ]
}
}
}
}
 
Vue.createApp（app）.mount（'#app'）
script>

 模板<模板>中使用 v-for:

v-for

<ul> <template v-for=“site in sites”> <li>{{ site.text }}li> <li>------li>  ul>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

v-for

<div id=“app”>
 <ul> 
<li v-for=“value in object”> {{ value }} 
li> 
ul> 
div> 
<script> 
const app = { data（） { return { object： { name： '教程'， url： 'http://www.runoob.com'， slogan： '学的不仅是技术，更是梦想！' } } } } Vue.createApp（app）.mount（'#app'） 
script>

 v-for 迭代整数

v-for也可以循环整数

v-for

<div id=“app”> <ul> <li v-for=“n in 10”> {{ n }} li> ul> 

显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。

v-for 实例

输出数组中的偶数：

<div id=“app”> <ul> <li v-for=“n in evenNumbers”>{{ n }}li> ul> 

 v-for/v-if 联合使用

以上实例联合使用 v-for/v-if 给 select 设置默认值：

v-for/v-if 实例

v-for 循环出列表，v-if 设置选中值：

<div id=“app”> 
<select @change=“changeVal（$event）” v-model=“selOption”> 
<template v-for=“（site，index） in sites” ：site=“site” ：index=“index” ：key=“site.id”>  <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> <script> const app = { 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）; } } }Vue.createApp（app）.mount（'#app'） script>