這次給大家帶來vue中有哪些迴圈遍歷指令,vue迴圈遍歷指令的注意事項有哪些,下面就是實戰案例,一起來看一下。
vue中迴圈遍歷使用的指令是v-for
1.v-for遍歷陣列
(1)value in arr 遍歷陣列中的元素
(2)(value,index) in arr 遍歷陣列中的元素和陣列下標
執行**:
new vue({
el:".box",
data:{
arr:["哈哈","嘻嘻","哼哼"]
輸出結果:
2.v-for遍歷json物件
(1)value in json 遍歷json物件中的值
(2)(value,key) in json 遍歷json物件中的值和鍵
(3)(value,key,index) in json 遍歷json物件中的值、鍵和索引
執行**:
new vue({
el:".box",
data:{
json:{
sougou:"搜狗"
輸出結果:
3.v-for遍歷整數
(1)n in 整數 遍歷1~整數,整數從1開始
(2)(n,index) in 整數 遍歷1~整數,整數從1開始,索引從0開始
執行**:
new vue({
el:".box",
data:{
輸出結果:
當然,v-for也可以在template中使用,但是這個我不想寫了
推薦閱讀:
怎樣在實戰專案中進行mvvm-******雙向繫結
如何使用js取得最近7天與最近3天日期
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...
for迴圈遍歷字串
for迴圈和while迴圈很類似 1.可以讓程式中的某段 重複執行 2.可以遍歷容器型別中的每乙個資料 for迴圈的語法格式 for 臨時變數 in 容器型別的資料 字串,列表,元組,字典,range,集合 print 臨時變數 for迴圈遍歷字串中的每乙個資料 my str hello for v...
Vue 迴圈遍歷 v for
如果在遍歷的過程中不需要使用索引值 如果在遍歷的過程中,我們需要拿到元素在陣列中的索引值呢?v for可以使用者遍歷物件 data 不能通過索引的方式更改陣列,這樣不會渲染頁面 不能通過更改長度的方式更改陣列,也不會渲染頁面 向物件內新增或者刪除屬性不會渲染頁面 使用 set 方法 object.d...