Vue.set(vm.userProfile, 'age', 27)
还可以使用vm.$set实例方法,它只是全局Vu.set的别名:
vm.$set(vm.userProfile, 'age', 27)有事可能需要为已有对象赋予多个新属性,所以,如果你想添加新的响应式属性:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'vue green'
})
显示过滤/排序结果
有时我们想要显示一个数组的过滤或者排序副本,而不是实际改变原始值,我们可以创建返回过滤或排序数组的计算属性:
<li v-for="n in evenNubers">{{ n }}</li>data: {
number: [1,2,3,4,5]},
computed: {
evenNubers:function() {
return this.number.reverse()
}
}
在计算属性不适用的情况下,可以使用method方法。
一段取值范围的v-for
v-for也可以取整数。在这种情况下,它将重复多次模板。
<div>
<span v-for="n in 10">{{ n }}</span>
</div>v-for on a <template>
类似于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 with v-if
当它们处于同一节点,v-for的优先级比v-if更高,这意味着v-if将分别重复运行于每个v-for循环中。当你想仅有的一些项渲染节点时,这种优先级的机制会十分有用:
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
一个组件的v-for
在自定义组件里,你可以像任何普通元素一样用v-for:
<my-component v-for=”item in items” :key=”item.id”></my-component>
在2.2.0+版本里面。当组件中使用v-for时,key现在是必须的。
然而,任何数据都不会自动传递到组件中,因为组件有自己的独立作用域,为了把迭代数据传递到组件里,我们要用props:
<my-component
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>不自动将item注入到原组件里的原因是这会使得组件与v-for的运作耦合,明确组件数据的来源能够使组件在其他场合重复使用。
示例










