vue遍歷陣列和物件的方法以及他們之間的區別

2022-09-18 04:36:19 字數 1376 閱讀 7764

前言:vue不能直接通過下標的形式來新增資料,vue也不能直接向物件中插值,因為那樣即使能插入值,頁面也不會重新渲染資料

一,vue遍歷陣列

1,使用vue陣列變異方法

pop() 刪除陣列最後一項

push() 往陣列裡面末尾增加一項

shift() 刪除陣列第一項

unshift() 往陣列第一項裡面加一些內容

splice() 向陣列裡面增加一項或刪除一項

sort() 陣列排序

reverse() 對陣列取反

2,陣列的引用

陣列在js中是引用型別,重新給需要改變的陣列進行定義並賦值,即物件引用方法

3,vue set方法

以下面陣列為例

tablist:[1,2,3,4,5 ]

1)全域性set方法使用

vue.set(vm.tablist,1,10) //將陣列下標為1的值改為10

2)例項set方法使用

vm.$set(vm.tablist,1,10) //將陣列下標為1的值改為10      

二,vue遍歷物件

1,物件引用

與遍歷陣列類似,重新給物件賦值(全部的值)

2,set方法(vm是我定義vue的乙個例項)

set方法既是vue全域性方法也是vue例項方法

以下面物件為例

tabobj,,],

1,push() ----push() 方法可把它的引數順序新增到tablelist1的尾部。它直接修改tablelist1,而不是建立乙個新的陣列

比如向陣列tablelist1加乙個新的物件:

this.tablelist1.push(

2,splice() --- splice() 方法向/從陣列中新增/刪除資料,然後返回被刪除的專案。(splice() 方法可刪除從 index 處開始的零個或多個元素,並且用引數列表中宣告的乙個或多個值來替換那些被刪除的元素。)

例如:  this.tablelist1.splice(0, 1) //表示從陣列第乙個物件開始刪除一項

遍歷陣列,遍歷物件的方法

遍歷陣列 方法1 for 迴圈 使用臨時變數將陣列長度快取起來,避免重複獲取陣列長度 for var i 0,leng arr.length i leng i 方法2 foreach迴圈 遍歷陣列中的每一項,沒有返回值,對原陣列沒有影響,不支援ie arr.foreach item,index,ar...

js遍歷陣列和物件的方法以及如何區分

普通的for迴圈 let arr 1,2,3,4 for let i 1 i arr.length i for in遍歷陣列的鍵名或者陣列的下標 存在的問題 1 在某些情況下,這段 可能按照隨機順序遍歷陣列元素,2 陣列原型鏈上的屬性都能被訪問到 let arr 1,2,3,4 for let i ...

js遍歷陣列和物件的方法

第二條鏈結裡有分析不同遍歷方式的效率 var arr name age var obj for in遍歷陣列和和物件 for key in obj foreach遍歷陣列,三個引數依次是陣列元素 索引 陣列本身 arr.foreach function value,index,array 返回乙個陣...