文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中v-for更新检测的操作方法

2024-04-02 19:55

关注

口诀:

数组变更方法如下:

1. arr.push()从后面添加元素

arr.push(5)

2. arr.pop()从后面删除元素,只能是一个

arr.pop()

3. arr.shift()从前面删除元素,只能删除一个

arr.shift()

4. arr.unshift()从前面添加元素,返回值时添加完后数组长度

arr.unshift(8)

5. arr.splice(i,n)删除从 i (索引值)开始之后删除的 N(删除的个数)个数


let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4]
console.log(arr)    // [1,2,5]

6. arr.sort()将数组进行排序,返回值排好的数组


let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

7. arr.reverse() 将数组反转


let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]

数组非变更方法如下:

1. arr.concat()连接两个数组


let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]

2. arr.slice(start,end)切去索引 start 到 end 索引值,不包含 start 索引值


let arr = [1,2,3,4,5]
console.log(arr.slice(1,3))   // [2,3]

覆盖方法


<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">截取前3个</button>
   
    sliceBtn(){
   // 2. 数组slice方法不会造成v-for更新
   // slice不会改变原始数组
   // this.arr.slice(0, 3)

   // 解决v-for更新 - 覆盖原始数组
   let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

this.$set()方法


<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">更新下标0的值</button>
   
   sliceBtn(){
   // 更新某个值时,v-for是检测不到的
   // this.arr[0] = 1000
   
   // 解决- this.$set()
   // 参数1:更新目标结构
   // 参数2:更新位置
   // 参数3:更新值
   let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

到此这篇关于Vue中v-for更新检测的文章就介绍到这了,更多相关vue v-for更新检测内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯