vue的迴圈遍歷,指令v for

2021-10-25 18:33:38 字數 2144 閱讀 9965

1.迴圈遍歷:

vue的迴圈遍歷用v-for,語法類似於js中的for迴圈

當我們有一組資料需要進行渲染時,我們就可以使用v-for來完成。

2.v-for使用格式:

格式為:v-for = item in items

(遍歷items中的資料)

1.v-for遍歷陣列

用v-for指令基於乙個陣列來渲染乙個列表。

v-for 指令使用item in items形式的語法,

其中items是源資料陣列, 而item則是被迭代的陣列元素。

* 如果v-for遍歷陣列中的陣列值

語法格式:v-for="movie in movies"

依次從movies中取出movie,並且在元素的內容中,我們可以使用mustache語法,來使用movie

} * 如果v-for遍歷陣列中的陣列值、索引值

語法格式:v-for=(item, index) in items

v-for中使用二個引數,即當前項和當前項的索引

}. }

>

for=

"name in names"

>

}<

/li>

<

/ul>

//v-for遍歷過程中,遍歷陣列中值,並顯示

for=

"(name,index) in names"

>}.

}<

/li>

<

/ul>

//遍歷過程中,遍歷陣列中值、索引值,並顯示

<

/div>

newvue(}

)<

/script>

v-for遍歷物件:

1.遍歷物件屬性 用value值

2.遍歷物件屬性和屬性值 用value值和key

3.遍歷物件屬性和屬性值和索引 用value值、key和index

>

//展示出所有資訊

}<

/li>

}<

/li>

}<

/li>

<

/ul>

//方法1.乙個個寫出來

for=

"item in info"

>

}<

/li>

<

/ul>

//方法2.用v-for遍歷物件的value值。(屬性)

for=

"(value,key) in info"

>}--

}<

/li>

<

/ul>

//方法3.用v-for遍歷物件的value值和key,value在前面。(屬性和屬性值)

for=

"(value,key,index) in info"

>}--

}--}<

/li>

<

/ul>

//方法4.用v-for遍歷物件的value值、key和index。(屬性和屬性值和索引)

<

/div>

newvue(}

})<

/script>

在遍歷陣列時可以在元素中繫結乙個key,key=陣列值

繫結key的作用 :主要是為了高效的更新虛擬dom。(vue內部;讓效能高一點)

* 當某一層有很多相同的節點時,也就是列表節點時,我們希望插入乙個新的節點,

則diff演算法預設執行起來是比較複雜的。(乙個個重新替換)

* 但繫結key後,可以使用key來給每個節點做乙個唯一標識

diff演算法就可以正確的識別此節點,找到正確的位置區插入新的節點。

>

for=

"item in letters"

:key=

"item"

>

}<

/li>

<

/ul>

<

/div>

newvue(}

)<

/script>

Vue迴圈指令v for

當需要將乙個陣列遍歷,或者將物件迴圈顯示時,就會用到列表渲染指令v for。它的表示式需結合in來使用,類似item in items的形式,看下面的示例 export default 上面的示例定義了乙個陣列型別的books,用v for將 分割符in前的語句使用括號,第二項就是books當前項的...

Vue 迴圈遍歷 v for

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

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...