vue基础 v-for更新监测
目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新
情况1: 数组翻转
情况2: 数组截取
情况3: 更新值
口诀:
数组变更方法, 就会导致v-for更新, 页面更新
数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
<template>
<div>
<ul>
<li v-for="(item,index) in arr " :key="index">
{{item}}
</li>
</ul>
<button @click="reverseBtn">reverse()翻转数组</button>
<button @click="pushBtn">push()追加一个数据</button>
<button @click="sliceBtn">slice()提取数据</button>
<button @click="updateOne">slice()修改第一项数据</button>
</div>
</template>
<script>
// push() / pop() / shift() / unshift() / splice() / sort() / reverse()
// vue封装好的
export default {
data () {
return {
arr:['刘备','关羽','张飞','赵云'],
}
},
methods:{
reverseBtn(){
this.arr.reverse()
},
pushBtn(){
this.arr.push('黄忠')
},
sliceBtn(){
const res = this.arr.slice(0,3) //从 0 开始取 ,取前三个
console.log(res);
this.arr = res
},
updateOne(){
// vue主要是对改变数组的方法封装了更新监测
// 直接通过索引修改,页面无法更新
// this.arr[0] = '带头大哥'
// 可以通过 this.set 修改索引的某一项
this.$set(this.arr,0,'带头大哥')
}
}
}
</script>
<style>
</style>
这些方法会触发数组改变, v-for会监测到并更新页面
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
这些方法不会触发v-for更新
-
slice()
-
filter()
-
concat()
注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组
总结: 改变原数组的方法才能让v-for更新
版权声明:本文为Henry_ID原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。