深入理解Vue 的条件渲染和列表渲染

2020-06-14 06:01:02易采站长站整理

</div>
<script>
var exp=new Vue({
el:".exp",
data:{
obj:{
firstname:"PureView",
lastname:"一个安静的美男子",
age:18
}
}
})
</script>

结果

PureView
一个安静的美男子
18

你一共可以提供三个参数,第二个参数为键名,第三个为索引:


<li v-for="value,key,index in obj">{{index+1}}. {{key}}: {{value}}</li>

结果

1. firstname: PureView
2. lastname: 一个安静的美男子
3. age: 18

数组更新检测

变异方法

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

例如


<div class="exp">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>

<script>
var exp=new Vue({
el:".exp",
data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"}
] }
})
exp.items.push({text:'watch TV'})
</script>

重塑数组

变异方法(mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异(non-mutating method)方法,例如: filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:


data:{
items:[
{text:"eat"},
{text:"play"},
{text:"game"},
{text:"gaming"},
{text:"wot"},
{text:"wows"},
{text:"wt"}
] }
}
exp.items.slice(0,5)

利用上一节的例子,返回的值不会改变原数据,在控制台打印我们就能看到了。

注意事项

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:


// Vue.set
Vue.set(exp.items, indexOfItem, newValue)


// Array.prototype.splice
exp.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,你可以使用 splice:


exp.items.splice(newLength)