列表渲染v-for

Posted 2020-09-04 半夏微澜ぺ

v-for我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要以item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

demo:

<ul>

　　<li v-for="item in items">{{item}}</li>

</ul>

 

data:{

　　items:[1,2,3,4,5,6,7,8]

}

 

渲染的结果

<ul>

　　<li>1</li>

　　<li>2</li>

　　<li>3</li>

　　<li>4</li>

　　<li>5</li>

　　<li>6</li>

　　<li>7</li>

　　<li>8</li>

</ul>

在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数作为当前项的索引。

<ul>

　　<li v-for="(index,item) in items">{{index}}:{{item}}</li>

</ul>

<ul>

　　<li>0:1</li>

　　<li>1:2</li>

　　<li>2:3</li>

　　<li>3:4</li>

　　<li>4:5</li>

　　<li>5:6</li>

　　<li>6:7</li>

　　<li>7:8</li>

</ul>

Template v-for

如同v-if模板，你也可以用带有v-for的<template>来渲染多个元素块

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul

对象迭代 v-for

你也可以使用v-for通过一个对象的属性来迭代

<ul>
        <li v-for="obj in object">{{obj}}</li>
    </ul>

data:{
    object:{
                name:"zhangsan",
                 age:20,
                  sex:"男"
              }
}

整数迭代v-for

v-for 也可以取整数，在这种情况下，它将重复多次模板。

<div>

　　<span v-for="n in 3">{{n}}</span>

</div>

渲染的结果是：

<div>

　　<span>1</span>

　　<span>2</span>

　　<span>3</span>

</div>

组件和v-for

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

<my-component v-for="item in items"></my-component>

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

然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props ：

不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用。

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

<div id="todo-list-example">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:title="todo"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>

 

Vue.component(‘todo-item‘, {
template: ‘<li>{{ title }}<button v-on:click="$emit(\‘remove\‘)">X</button></li>‘,
props: [‘title‘]
})
 
new Vue({
el: ‘#todo-list-example‘,
data: {
newTodoText: ‘‘,
todos: [
‘Do the dishes‘,
‘Take out the trash‘,
‘Mow the lawn‘
]
},
methods: {
addNewTodo: function () {
this.todos.push(this.newTodoText)
this.newTodoText = ‘‘
}
}
})

显示过滤/排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

 

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}

<li v-for="n in even(numbers)">{{ n }}</li>或者，你也可以在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 使用 method 方法：

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}