222 lines
3.8 KiB
Markdown
222 lines
3.8 KiB
Markdown
#### v-for
|
|
|
|
```html
|
|
<ul id="example-1">
|
|
<li v-for="item in items" :key="item.message">
|
|
{{ item.message }}
|
|
</li>
|
|
</ul>
|
|
```
|
|
|
|
```js
|
|
var example1 = new Vue({
|
|
el: '#example-1',
|
|
data: {
|
|
items: [
|
|
{ message: 'Foo' },
|
|
{ message: 'Bar' }
|
|
]
|
|
}
|
|
})
|
|
```
|
|
|
|
```html
|
|
<ul id="example-2">
|
|
<li v-for="(item, index) in items">
|
|
{{ parentMessage }} - {{ index }} - {{ item.message }}
|
|
</li>
|
|
</ul>
|
|
```
|
|
|
|
```js
|
|
var example2 = new Vue({
|
|
el: '#example-2',
|
|
data: {
|
|
parentMessage: 'Parent',
|
|
items: [
|
|
{ message: 'Foo' },
|
|
{ message: 'Bar' }
|
|
]
|
|
}
|
|
})
|
|
```
|
|
|
|
### v-for遍历一个对象的元素
|
|
|
|
```html
|
|
<ul id="v-for-object" class="demo">
|
|
<li v-for="value in object">
|
|
{{ value }}
|
|
</li>
|
|
</ul>
|
|
|
|
<div v-for="(value, name) in object">
|
|
{{ name }}: {{ value }}
|
|
</div>
|
|
|
|
<div v-for="(value, name, index) in object">
|
|
{{ index }}. {{ name }}: {{ value }}
|
|
</div>
|
|
|
|
<div v-for="item in items" v-bind:key="item.id">
|
|
<!-- 内容 -->
|
|
</div>
|
|
```
|
|
|
|
```js
|
|
new Vue({
|
|
el: '#v-for-object',
|
|
data: {
|
|
object: {
|
|
title: 'How to do lists in Vue',
|
|
author: 'Jane Doe',
|
|
publishedAt: '2016-04-10'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
#### 显示过滤/排序后的结果
|
|
|
|
- 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
|
|
|
|
```html
|
|
<li v-for="n in evenNumbers">{{ n }}</li>
|
|
```
|
|
|
|
```js
|
|
data: {
|
|
numbers: [ 1, 2, 3, 4, 5 ]
|
|
},
|
|
computed: {
|
|
evenNumbers: function () {
|
|
return this.numbers.filter(function (number) {
|
|
return number % 2 === 0
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
- 在计算属性不适用的情况下 (例如，在嵌套 `v-for` 循环中) 可以使用一个方法
|
|
|
|
```html
|
|
<ul v-for="set in sets">
|
|
<li v-for="n in even(set)">{{ n }}</li>
|
|
</ul>
|
|
```
|
|
|
|
```js
|
|
data: {
|
|
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
|
|
},
|
|
methods: {
|
|
even: function (numbers) {
|
|
return numbers.filter(function (number) {
|
|
return number % 2 === 0
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
```html
|
|
<div>
|
|
<span v-for="n in 10">{{ n }} </span>
|
|
</div>
|
|
|
|
<ul>
|
|
<template v-for="item in items">
|
|
<li>{{ item.msg }}</li>
|
|
<li class="divider" role="presentation"></li>
|
|
</template>
|
|
</ul>
|
|
```
|
|
|
|
#### v-for,v-if 一同使用
|
|
|
|
- 当它们处于同一节点，`v-for` 的优先级比 `v-if` 更高，这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中。当你只想为*部分*项渲染节点时，这种优先级的机制会十分有用。
|
|
-
|
|
|
|
```html
|
|
<--代码将只渲染未完成的 todo-->
|
|
<li v-for="todo in todos" v-if="!todo.isComplete">
|
|
{{ todo }}
|
|
</li>
|
|
<ul v-if="todos.length">
|
|
<li v-for="todo in todos">
|
|
{{ todo }}
|
|
</li>
|
|
</ul>
|
|
<p v-else>No todos left!</p>
|
|
```
|
|
|
|
#### v-for在组件中
|
|
|
|
```html
|
|
<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>
|
|
<li
|
|
is="todo-item"
|
|
v-for="(todo, index) in todos"
|
|
v-bind:key="todo.id"
|
|
v-bind:title="todo.title"
|
|
v-on:remove="todos.splice(index, 1)"
|
|
></li>
|
|
</ul>
|
|
</div>
|
|
```
|
|
|
|
|
|
|
|
```js
|
|
Vue.component('todo-item', {
|
|
template: '\
|
|
<li>\
|
|
{{ title }}\
|
|
<button v-on:click="$emit(\'remove\')">Remove</button>\
|
|
</li>\
|
|
',
|
|
props: ['title']
|
|
})
|
|
|
|
new Vue({
|
|
el: '#todo-list-example',
|
|
data: {
|
|
newTodoText: '',
|
|
todos: [
|
|
{
|
|
id: 1,
|
|
title: 'Do the dishes',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Take out the trash',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Mow the lawn'
|
|
}
|
|
],
|
|
nextTodoId: 4
|
|
},
|
|
methods: {
|
|
addNewTodo: function () {
|
|
this.todos.push({
|
|
id: this.nextTodoId++,
|
|
title: this.newTodoText
|
|
})
|
|
this.newTodoText = ''
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|