Vue學習11 Vue的遍歷迴圈

2021-10-25 03:56:42 字數 1513 閱讀 1490

v-for遍歷陣列:我們有時候需要對陣列進行遍歷,在vue中,v-for為我們提供了一種遍歷陣列的方式:我們既可以只遍歷陣列的值,也可以通過v-for遍歷陣列的下標值:

示例**

>

<

!-- 遍歷未使用索引值 --

>

for=

"book in books"

>

}<

/p>

<

!-- 遍歷中使用索引值 --

>

for=

"(book,index) in books"

>}.

}<

/p>

<

/div>

newvue(,

methods:})

;<

/script>執行截圖:上面為不獲取陣列索引值,下面為獲取了陣列索引值

當需要獲取陣列索引值時,需要將陣列值名稱和索引名稱包含在括號內,並且索引值名稱放後面

如:(book,index) in books,其中book所遍歷的陣列值,index是遍歷的陣列下標值。

![在這裡插入描述](

v-for遍歷物件:vue的v-for也可以進行遍歷物件,物件遍歷時有三個值,物件屬性值,key以及索引值:

當遍歷物件返回乙個值時,返回的時value;

示例**

>

<

!-- 遍歷物件返回乙個值,獲取到的時value --

>

for=

"item in student"

>

}<

/p>

<

!-- 遍歷物件獲取key --

>

for=

"(item,key) in student"

>}:

}<

/p>

<

!-- 遍歷物件獲取value key index --

>

for=

"(value,key,index) in student"

>}.

}:}<

/p>

<

/div>

newvue(}

, methods:})

;<

/script>執行結果:當遍歷物件返回乙個值時,返回的是value,遍歷時需要同時獲取鍵值時,可以採用(value,key)進行遍歷,當遍歷物件需要獲取鍵值對以及物件下標時,可以通過(value,key,index)進行遍歷:

Vue迴圈遍歷

在遍歷過程中沒有使用下標值 for item in names li ul 在遍歷過程中,獲取索引值 for item,index in names li ul div js vue.js script newvue script for value,key in info li ul for va...

Vue 迴圈遍歷 v for

如果在遍歷的過程中不需要使用索引值 如果在遍歷的過程中,我們需要拿到元素在陣列中的索引值呢?v for可以使用者遍歷物件 data 不能通過索引的方式更改陣列,這樣不會渲染頁面 不能通過更改長度的方式更改陣列,也不會渲染頁面 向物件內新增或者刪除屬性不會渲染頁面 使用 set 方法 object.d...

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指令基於乙個陣列來渲染乙個列表...