标签：嵌套 back zha for 多次 自己 自定义 ext style
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>
如同v-if模板，你也可以用带有v-for的<template>来渲染多个元素块
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul
你也可以使用v-for通过一个对象的属性来迭代
<ul> <li v-for="obj in object">{{obj}}</li> </ul>
data:{ object:{ name:"zhangsan", age:20, sex:"男" } }
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 。
<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 }) } }
标签：嵌套 back zha for 多次 自己 自定义 ext style
原文地址：http://www.cnblogs.com/xiaofenguo/p/6549728.html
