数据更新检测:
变异方法:引起视图更新
以push为例:
<template>
<!--在template,只能存在一个根组件-->
<div class="event">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
<button v-on:click="pushArr">按钮</button>
</div>
</template>
<script>
export default {
//data中数据改变,会引起视图的改变MVVM
data(){
return{
names:["iwen","ime","ice"]
}
},
methods:{
pushArr(){
this.names.push("frack");
}
}
}
</script>
<style>
</style>
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push() 往数组最后面添加一个元素,成功返回数组的长度
pop() 删除数组的最后一个元素,成功返回删除元素的值
shift() 删除数组的第一个元素,成功返回删除元素的值
unshift() 往数组最前面添加一个元素,成功返回当前数组的长度
splice() 有三个参数,第一个是想要的删除的元素的下标(必选),第二个是想要的删除的个数(必选)。第三个是在被删除的位置添加数组新成员,无论何时,
使用该方法删除元素时注意数组长度有变化,bug可能就是因为它
sort() 将数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()将数组倒序,成功返回倒序后的数组
splice案例:
<template>
<!--在template,只能存在一个根组件-->
<div class="event">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
<button v-on:click="pushArr">按钮</button>
</div>
</template>
<script>
export default {
//data中数据改变,会引起视图的改变MVVM
data(){
return{
names:["c","b","a"]
}
},
methods:{
pushArr(){
this.names.splice(2,1,"f");
}
}
}
</script>
<style>
</style>
效果图:
替换数组:不会引起视图更新
filter()
concat()
slice()
这些不会改变原始数组
显示过滤/排序结果
有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。
例如:
<template>
<div class="event">
<button v-on:click="getOdd">我要奇数</button>
</div>
</template>
<script>
export default {
data(){
return{
nums:[1,2,3,4,5,6,7]
}
},
methods:{
getOdd(){
this.nums.filter(function(num){//filter进行过滤
if (num%2!==0) {
console.log(num)
}
})
}
}
}
</script>
<style>
</style>
当点击按钮的时候控制台会打印奇数