Vue迴圈指令v for

2021-09-03 08:32:33 字數 624 閱讀 9240

當需要將乙個陣列遍歷,或者將物件迴圈顯示時,就會用到列表渲染指令v-for。它的表示式需結合in來使用,類似item in items的形式,看下面的示例:

export default

] }}

上面的示例定義了乙個陣列型別的books,用v-for將

分割符in前的語句使用括號,第二項就是books當前項的索引,結果如下圖:

除了陣列之外,物件也是可以遍歷的,例如:

data:

} })

渲染後的結果為:

kenl男26

vue的核心時資料與檢視的雙向繫結,當我們修改陣列時,vue會檢測到資料的變化,所以用v-for渲染的檢視也會立即更新。vue包含了一組觀察陣列變異的方法,使用它們改變陣列也會觸發檢視更新:

使用以上方法會改變被呼叫的原始陣列,有些方法不會改變原始陣列,例如:

大家可以嘗試列印一下結果,會發現books陣列還是原來的陣列並沒有發生改變,而rool陣列是被過濾的陣列,發生了改變。

vue的迴圈遍歷,指令v for

1.迴圈遍歷 vue的迴圈遍歷用v for,語法類似於js中的for迴圈 當我們有一組資料需要進行渲染時,我們就可以使用v for來完成。2.v for使用格式 格式為 v for item in items 遍歷items中的資料 1.v for遍歷陣列 用v for指令基於乙個陣列來渲染乙個列表...

VUE課程參考 13 迴圈指令v for

vue中迴圈指令v for可以迴圈陣列 v for item in list 迴圈物件 v for val,key in obj 迴圈數字 v for count in 10 1 v for迴圈陣列 2 v for迴圈物件 val key 3 v for迴圈數字 1 v for迴圈陣列 2 v fo...

Vue實踐 V for指令

當需要將乙個陣列或者物件迴圈遍歷顯示的時候可以使用v for指令,其值類似於item in items 其中items是陣列或者物件,item自然就是其中的一項,in 也可使用 of。當遍歷陣列的時候有乙個可選項index,是當前項的索引 類似與 v for item,index in items ...