vue-列表渲染

Posted 2020-09-11 小拽A

列表渲染：
1.我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是
数组元素迭代的别名。
1.1基本语法：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
1.2在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>

var example2 = new Vue({
el: ‘#example-2‘,
data: {
parentMessage: ‘Parent‘,
items: [
{ message: ‘Foo‘ },
{ message: ‘Bar‘ }
]
}
})
也可以用 of 替代 in 作为分隔符，因为它是最接近 javascript 迭代器的语法：
<div v-for="item of items"></div>
2.1.templet模板语法
如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
2.2对象迭代
你也可以用 v-for 通过一个对象的属性来迭代。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: ‘#repeat-object‘,
data: {
object: {
FirstName: ‘John‘,
LastName: ‘Doe‘,
Age: 30
}
}
})
2.3你也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
2.4第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
2.5v-for 也可以取整数。在这种情况下，它将重复多次模板。
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
3.在组件里面的使用
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index">
</my-component>
4.不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用。

<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="(tod o, 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 = ‘‘
}
}
})
5.key