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: 'yssmx' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
< / script >

尝试一下 »

v-for 还支持一个可选的第二个参数，参数值为当前项的索引：

v-for 实例

index 为列表项的索引值：

< div id = "app" >
  < ol >
    < li v- for = "(site, index) in sites" >
      {{ index }} -{{ site.text }}
    < / li >
  < / ol >
< / div >
< script >
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'yssmx' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
< / script >

尝试一下 »

模板 <template> 中使用 v-for：

v-for

< ul > < template v-for = " site in sites " > < li > {{ site.text }} </ li > < li > -------------- </ li > </ template > </ 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: '云搜索MX教程', url: 'http://www.yssmx.com', slogan: '学的不仅是技术，更是梦想！' } } } } Vue.createApp(app).mount('#app') </ script >

尝试一下 »

你也可以提供第二个的参数为键名：

v-for

< div id = " app " > < ul > < li v-for = " (value, key) in object " > {{ key }} : {{ value }} </ li > </ ul > </ div >

尝试一下 »

第三个参数为索引：

v-for

< div id = " app " > < ul > < li v-for = " (value, key, index) in object " > {{ index }}. {{ key }} : {{ value }} </ li > </ ul > </ div >

尝试一下 »

v-for 迭代整数

v-for 也可以循环整数

v-for

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

尝试一下 »

显示过滤/排序后的结果

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

v-for 实例

输出数组中的偶数：

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

尝试一下 »

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 " > <!-- 索引为 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 > < script > const app = { data() { return { selOption: "yssmx", sites: [ {id:1,name:"Google"}, {id:2,name:"yssmx"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } } } Vue.createApp(app).mount('#app') </ script >

尝试一下 »

在组件上使用 v-for

如果你还没了解组件的内容，可以先跳过这部分。

在自定义组件上，你可以像在任何普通元素上一样使用 v-for： 

									<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props： 

									<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的 todo 列表的完整例子：

实例

< div id = " todo-list-example " > < form v-on:submit . prevent = " addNewTodo " > < label for = " new-todo " > Add a todo </ label > < input v-model = " newTodoText " id = " new-todo " placeholder = " E.g. Feed the cat " /> < button > Add </ button > </ form > < ul > < todo-item v-for = " (todo, index) in todos " :key = " todo.id " :title = " todo.title " @ remove = " todos.splice(index, 1) " > </ todo-item > </ ul > </ div >

尝试一下 »