Vue.JS入门教程之列表渲染
你可以使用v-repeat指令来基于ViewModel上的对象数组渲染列表。对于数组中的每个对象，该指令将创建一个以该对象作为其$data对象的子Vue实例。这些子实例继承父实例的数据作用域，因此在重复的模板元素中你既可以访问子实例的属性，也可以访问父实例的属性。此外,你还可以通过$index属性来获取当前实例对应的数组索引。
<ulid="demo">
<liv-repeat="items"class="item-{{$index}}">
{{$index}}-{{parentMsg}}{{childMsg}}
</li>
</ul>
vardemo=newVue({
el:'#demo',
data:{
parentMsg:'Hello',
items:[
{childMsg:'Foo'},
{childMsg:'Bar'}
]
}
})
查看一下效果，应该很容易得到结果
块级重复
有时我们可能需要重复一个包含多个节点的块，这时可以用<template>标签包裹这个块。这里的<template>标签只起到语义上的包裹作用，其本身不会被渲染出来。例如：
<ul>
<templatev-repeat="list">
<li>{{msg}}</li>
<liclass="divider"></li>
</template>
</ul>
简单值数组
简单值(primitivevalue)即字符串、数字、boolean等并非对象的值。对于包含简单值的数组，你可用$value直接访问值:
<ulid="tags">
<liv-repeat="tags">
{{$value}}
</li>
</ul>
newVue({
el:'#tags',
data:{
tags:['JavaScript','MVVM','Vue.js']
}
})
使用别名
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给v-repeat指令并用它作为将被迭代项的别名:
<ulid="users">
<liv-repeat="user:users">
{{user.name}}-{{user.email}}
</li>
</ul>
varusers=newVue({
el:'#users',
data:{
users:[
{name:'FooBar',email:'foo@bar.com'},
{name:'JohnDoh',email:'john@doh.com'}
]
}
});
变异方法
Vue.js内部对被观察数组的变异方法(mutatingmethods，包括push(),pop(),shift(),unshift(),splice(),sort()和reverse())进行了拦截，因此调用这些方法也将自动触发视图更新。
//以下操作会触发DOM更新
demo.items.unshift({childMsg:'Baz'})
demo.items.pop()
下面是一个演示的例子，点击按钮的时候数据项会被移除
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ulid="tags">
<liv-repeat="tags">
{{$value}}
</li>
</ul>
<inputtype="button"value="测试"onclick="myClick();">
<script>
vartag=newVue({
el:'#tags',
data:{
tags:['标签一','标签二','标签三']
}
});
functionmyClick(){
tag.tags.pop();
}
</script>
</body>
</html>
扩展方法
Vue.js给被观察数组添加了两个便捷方法：$set()和$remove()。
你应该避免直接通过索引来设置数据绑定数组中的元素，比如demo.items[0]={}，因为这些改动是无法被Vue.js侦测到的。你应该使用扩展的$set()方法:
//不要用`demo.items[0]=...`
demo.items.$set(0,{childMsg:'Changed!'})
$remove()只是splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时，$remove()将在数组中搜索该值并删除第一个发现的对应元素。
//删除索引为0的元素。 demo.items.$remove(0)
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ulid="tags">
<liv-repeat="tags">
{{$value}}
</li>
</ul>
<inputtype="button"value="测试"onclick="myClick();">
<script>
vartag=newVue({
el:'#tags',
data:{
tags:['标签一','标签二','标签三']
}
});
functionmyClick(){
//tag.tags.pop();
//tag.tags[0]='修改后的内容不生效';
tag.tags.$set(0,'修改后的内容生效');
tag.tags.$remove(1);
}
</script>
</body>
</html>
替换数组
当你使用非变异方法，比如filter(),concat()或slice()，返回的数组将是一个不同的实例。在此情况下，你可以用新数组替换旧的数组:
demo.items=demo.items.filter(function(item){
returnitem.childMsg.match(/Hello/)
})
你可能会认为这将导致整个列表的DOM被销毁并重新渲染。但别担心，Vue.js能够识别一个数组元素是否已有关联的Vue实例，并尽可能地进行有效复用。
使用track-by（vue中track-by属性）
在某些情况下，你可能需要以全新的对象（比如API调用所返回的对象）去替换数组。如果你的每一个数据对象都有一个唯一的id属性，那么你可以使用track-by特性参数给Vue.js一个提示，这样它就可以复用已有的具有相同id的Vue实例和DOM节点。
例如：你的数据是这个样子的
{
items:[
{_uid:'88f869d',...},
{_uid:'7496c10',...}
]
}
那么你可以像这样给出提示:
<divv-repeat="items"track-by="_uid"> <!--content--> </div>
在替换items数组时，Vue.js如果碰到一个有_uid:'88f869d'的新对象，它就会知道可以直接复用有同样_uid的已有实例。在使用全新数据重新渲染大型v-repeat列表时，合理使用track-by能极大地提升性能。
遍历对象
你也可以使用v-repeat遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性$key。对于简单值，你也可以象访问数组中的简单值那样使用$value属性。
<ulid="repeat-object">
<liv-repeat="primitiveValues">{{$key}}:{{$value}}</li>
<li>===</li>
<liv-repeat="objectValues">{{$key}}:{{msg}}</li>
</ul>
newVue({
el:'#repeat-object',
data:{
primitiveValues:{
FirstName:'John',
LastName:'Doe',
Age:30
},
objectValues:{
one:{
msg:'Hello'
},
two:{
msg:'Bye'
}
}
}
});
在ECMAScript5中，对于给对象添加一个新属性，或是从对象中删除一个属性时，没有机制可以检测到这两种情况。针对这个问题，Vue.js中的被观察对象会被添加三个扩展方法:$add(key,value),$set(key,value)和$delete(key)。这些方法可以被用于在添加/删除观察对象的属性时触发对应的视图更新。方法$add和$set的不同之处在于当指定的键已经在对象中存在时$add将提前返回，所以调用obj.$add(key)并不会以undefined覆盖已有的值。
迭代值域
v-repeat也可以接受一个整数。在这种情况下，它将重复显示一个模板多次。下面的例子将迭代3次。
<divid="range">
<divv-repeat="val">Hi!{{$index}}</div>
</div>
newVue({
el:'#range',
data:{
val:3
}
});
数组过滤器
有时候我们只需要显示一个数组的过滤或排序过的版本，而不需要实际改变或重置原始数据。Vue提供了两个内置的过滤器来简化此类需求：filterBy和orderBy。
<inputv-model="searchText">
<ul>
<liv-repeat="users|filterBysearchText">{{name}}</li>
</ul>
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。