循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
HTML
x
32
32
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>7
</head>8
<body>9
<div id="app">10
<ol>11
<li v-for="site in sites">12
{{ site.text }}13
</li>14
</ol>15
</div>16
<script>17
const app = {18
data() {19
return {20
sites: [21
{ text: 'Google' },22
{ text: 'Web176' },23
{ text: 'Taobao' }24
]25
}26
}27
}28
29
Vue.createApp(app).mount('#app')30
</script>31
</body>32
</html>v-for 还支持一个可选的第二个参数，参数值为当前项的索引。
index 为列表项的索引值：
HTML
xxxxxxxxxx1
32
32
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ol>11
<li v-for="(site, index) in sites">12
{{ index }} -{{ site.text }}13
</li>14
</ol>15
</div>16
<script>17
const app = {18
data() {19
return {20
sites: [21
{ text: 'Google' },22
{ text: 'Web176教程' },23
{ text: 'Taobao' }24
]25
}26
}27
}28
29
Vue.createApp(app).mount('#app')30
</script>31
</body>32
</html>模板<template>中使用 v-for：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<template v-for="site in sites">12
<li>{{ site.text }}</li>13
<li>--------------</li>14
</template>15
</ul>16
</div>17
<script>18
const app = {19
data() {20
return {21
sites: [22
{ text: 'Google' },23
{ text: 'Web176教程' },24
{ text: 'Taobao' }25
]26
}27
}28
}29
30
Vue.createApp(app).mount('#app')31
</script>32
</body>33
</html>v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<li v-for="value in object">12
{{ value }}13
</li>14
</ul>15
</div>16
17
<script>18
const app = {19
data() {20
return {21
object: {22
name: 'Web176教程',23
url: 'https://www.web176.com',24
slogan: 'Web176教程,您想要的教程都在这里。'25
}26
}27
}28
}29
30
Vue.createApp(app).mount('#app')31
</script>32
</body>33
</html>你也可以提供第二个的参数为键名：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<li v-for="(value, key) in object">12
{{ key }} : {{ value }}13
</li>14
</ul>15
</div>16
17
<script>18
const app = {19
data() {20
return {21
object: {22
name: 'Web176教程',23
url: 'https://www.web176.com',24
slogan: '您想要的教程都在这里。'25
}26
}27
}28
}29
30
Vue.createApp(app).mount('#app')31
</script>32
</body>33
</html>第三个参数为索引：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<li v-for="(value, key, index) in object">12
{{ index }}. {{ key }} : {{ value }}13
</li>14
</ul>15
</div>16
17
<script>18
const app = {19
data() {20
return {21
object: {22
name: 'Web176教程',23
url: 'https://www.web176.com',24
slogan: '您想要的教程都在这里。'25
}26
}27
}28
}29
30
Vue.createApp(app).mount('#app')31
</script>32
</body>33
</html>v-for 迭代整数
v-for 也可以循环整数。
HTML
xxxxxxxxxx1
21
21
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<li v-for="n in 10">12
{{ n }}13
</li>14
</ul>15
</div>16
17
<script>18
Vue.createApp(app).mount('#app')19
</script>20
</body>21
</html>显示过滤/排序后的结果
我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。
输出数组中的偶数：
HTML
xxxxxxxxxx1
32
32
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<ul>11
<li v-for="n in evenNumbers">{{ n }}</li>12
</ul>13
</div>14
15
<script>16
const app = {17
data() {18
return {19
numbers: [ 1, 2, 3, 4, 5 ]20
}21
},22
computed: {23
evenNumbers() {24
return this.numbers.filter(number => number % 2 === 0)25
}26
}27
}28
29
Vue.createApp(app).mount('#app')30
</script>31
</body>32
</html>v-for/v-if 联合使用
以上实例联合使用 v-for/v-if 给 select 设置默认值。
v-for 循环出列表，v-if 设置选中值：
HTML
xxxxxxxxxx1
44
44
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="app">10
<select @change="changeVal($event)" v-model="selOption">11
<template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">12
<!-- 索引为 1 的设为默认值，索引值从0 开始-->13
<option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>14
<option v-else :value="site.name">{{site.name}}</option>15
</template>16
</select>17
<div>您选中了:{{selOption}}</div>18
</div>19
20
<script>21
const app = {22
data() {23
return {24
selOption: "Web176",25
sites: [26
{id:1,name:"Google"},27
{id:2,name:"Web176"},28
{id:3,name:"Taobao"},29
]30
}31
32
},33
methods:{34
changeVal:function(event){35
this.selOption = event.target.value;36
alert("你选中了"+this.selOption);37
}38
}39
}40
41
Vue.createApp(app).mount('#app')42
</script>43
</body>44
</html>在组件上使用 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 列表的完整例子：
HTML
xxxxxxxxxx1
76
76
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Vue 测试实例 - Web176教程(web176.com)</title>6
<script src="https://unpkg.com/vue@next"></script>7
</head>8
<body>9
<div id="todo-list-example">10
<form v-on:submit.prevent="addNewTodo">11
<label for="new-todo">添加 todo</label>12
<input13
v-model="newTodoText"14
id="new-todo"15
placeholder="例如：明天早上跑步"16
/>17
<button>添加</button>18
</form>19
<ul>20
<todo-item21
v-for="(todo, index) in todos"22
:key="todo.id"23
:title="todo.title"24
@remove="todos.splice(index, 1)"25
></todo-item>26
</ul>27
</div>28
29
<script>30
const app = Vue.createApp({31
data() {32
return {33
newTodoText: '',34
todos: [35
{36
id: 1,37
title: '看电影'38
},39
{40
id: 2,41
title: '吃饭'42
},43
{44
id: 3,45
title: '上 Web176教程 学习'46
}47
],48
nextTodoId: 449
}50
},51
methods: {52
addNewTodo() {53
this.todos.push({54
id: this.nextTodoId++,55
title: this.newTodoText56
})57
this.newTodoText = ''58
}59
}60
})61
62
app.component('todo-item', {63
template: `64
<li>65
{{ title }}66
<button @click="$emit('remove')">删除</button>67
</li>68
`,69
props: ['title'],70
emits: ['remove']71
})72
73
app.mount('#todo-list-example')74
</script>75
</body>76
</html>阅读剩余 98%
作者：terry，如若转载，请注明出处：https://www.web176.com/vue3/6281.html
支付宝 
微信 