Vue.js 列表渲染2
在v-for里使用值范围
v-for也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div> <span v-for="n in 10">{{ n }} </span></div>在<template>上使用v-for
类似于v-if，你也可以利用带有v-for的<template>来循环渲染一段包含多个元素的内容。比如：
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template></ul>v-for与v-if一同使用
注意我们不推荐在同一元素上使用v-if和v-for。
当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将v-if置于外层元素 (或<template>) 上。如：
<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li></ul><p v-else>No todos left!</p>在组件上使用v-for
在自定义组件上，你可以像在任何普通元素上一样使用v-for。
<my-component v-for="item in items" :key="item.id"></my-component>2.2.0 的版本里，当在组件上使用v-for时，key现在是必须的。****
然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind: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> <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>注意这里的is="todo-item"attribute。这种做法在使用 DOM 模板时是十分必要的，因为在<ul>元素内只有<li>元素会被看作有效内容。这样做实现的效果与<todo-item>相同，但是可以避开一些潜在的浏览器解析错误。
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 = '' } }}) 赞 (0)