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