[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvue\u002Fv-for":3},{"id":4,"title":5,"author":6,"body":7,"category":294,"date":295,"description":296,"draft":297,"extension":298,"image":299,"meta":300,"navigation":81,"path":301,"seo":302,"series":299,"seriesOrder":299,"seriesTitle":299,"stem":303,"tags":304,"updatedAt":307,"__hash__":308},"blog\u002Fblog\u002Fvue\u002Fv-for.md","v-for 迴圈指令","charles",{"type":8,"value":9,"toc":290},"minimark",[10,27,31,50,53,286],[11,12,13,14,21,22,26],"p",{},"v-for 是 Vue 提供的 ",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fbuilt-in-directives.html#v-for",[19],"nofollow","🔗 指令 (directive)"," 之一，用於在 ",[23,24,25],"code",{},"\u003Ctemplate>"," 中遍歷數據。如同普遍高階程式語言常用的 for 迴圈，在渲染介面元素時，透過這個指令可以直覺且高效的產生動態且大量的數據。",[28,29,30],"h2",{"id":30},"適用的資料型別",[32,33,34,38,41,44,47],"ul",{},[35,36,37],"li",{},"Array",[35,39,40],{},"Object",[35,42,43],{},"Number",[35,45,46],{},"String",[35,48,49],{},"Iterable",[28,51,52],{"id":52},"基本使用方式",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-vue:line-numbers shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const listArr = ref(['Mike', 'Jacky', 'Andy']);\n\n  const info = ref({\n    name: 'Chris',\n    age: 18,\n  });\n\n  const str = ref('Hello Vue3');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- number -->\n  \u003Cul>\n    \u003Cli v-for=\"(i, idx) in 5\">\n      \u003Ch1>{{ idx }} : {{ i }}\u003C\u002Fh1>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003C!-- string -->\n  \u003Cul>\n    \u003Cli v-for=\"(item, idx) in str\">\n      \u003Ch1>{{ idx }}: {{ item }}\u003C\u002Fh1>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003C!-- array -->\n  \u003Cul>\n    \u003Cli v-for=\"(item, idx) in listArr\">\n      \u003Ch1>{{ idx }}: {{ item }}\u003C\u002Fh1>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003C!-- object -->\n  \u003Cul>\n    \u003Cli v-for=\"(val, key, idx) in info\">\n      \u003Ch1>{{ idx }}: {{ key }}: {{ val }}\u003C\u002Fh1>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","vue:line-numbers","",[23,61,62,70,76,83,89,94,100,106,112,118,123,129,135,140,146,152,158,164,170,176,182,188,193,199,205,210,215,221,226,232,237,242,247,253,258,264,270,275,280],{"__ignoreMap":59},[63,64,67],"span",{"class":65,"line":66},"line",1,[63,68,69],{},"\u003Cscript setup>\n",[63,71,73],{"class":65,"line":72},2,[63,74,75],{},"  import { ref } from 'vue';\n",[63,77,79],{"class":65,"line":78},3,[63,80,82],{"emptyLinePlaceholder":81},true,"\n",[63,84,86],{"class":65,"line":85},4,[63,87,88],{},"  const listArr = ref(['Mike', 'Jacky', 'Andy']);\n",[63,90,92],{"class":65,"line":91},5,[63,93,82],{"emptyLinePlaceholder":81},[63,95,97],{"class":65,"line":96},6,[63,98,99],{},"  const info = ref({\n",[63,101,103],{"class":65,"line":102},7,[63,104,105],{},"    name: 'Chris',\n",[63,107,109],{"class":65,"line":108},8,[63,110,111],{},"    age: 18,\n",[63,113,115],{"class":65,"line":114},9,[63,116,117],{},"  });\n",[63,119,121],{"class":65,"line":120},10,[63,122,82],{"emptyLinePlaceholder":81},[63,124,126],{"class":65,"line":125},11,[63,127,128],{},"  const str = ref('Hello Vue3');\n",[63,130,132],{"class":65,"line":131},12,[63,133,134],{},"\u003C\u002Fscript>\n",[63,136,138],{"class":65,"line":137},13,[63,139,82],{"emptyLinePlaceholder":81},[63,141,143],{"class":65,"line":142},14,[63,144,145],{},"\u003Ctemplate>\n",[63,147,149],{"class":65,"line":148},15,[63,150,151],{},"  \u003C!-- number -->\n",[63,153,155],{"class":65,"line":154},16,[63,156,157],{},"  \u003Cul>\n",[63,159,161],{"class":65,"line":160},17,[63,162,163],{},"    \u003Cli v-for=\"(i, idx) in 5\">\n",[63,165,167],{"class":65,"line":166},18,[63,168,169],{},"      \u003Ch1>{{ idx }} : {{ i }}\u003C\u002Fh1>\n",[63,171,173],{"class":65,"line":172},19,[63,174,175],{},"    \u003C\u002Fli>\n",[63,177,179],{"class":65,"line":178},20,[63,180,181],{},"  \u003C\u002Ful>\n",[63,183,185],{"class":65,"line":184},21,[63,186,187],{},"  \u003C!-- string -->\n",[63,189,191],{"class":65,"line":190},22,[63,192,157],{},[63,194,196],{"class":65,"line":195},23,[63,197,198],{},"    \u003Cli v-for=\"(item, idx) in str\">\n",[63,200,202],{"class":65,"line":201},24,[63,203,204],{},"      \u003Ch1>{{ idx }}: {{ item }}\u003C\u002Fh1>\n",[63,206,208],{"class":65,"line":207},25,[63,209,175],{},[63,211,213],{"class":65,"line":212},26,[63,214,181],{},[63,216,218],{"class":65,"line":217},27,[63,219,220],{},"  \u003C!-- array -->\n",[63,222,224],{"class":65,"line":223},28,[63,225,157],{},[63,227,229],{"class":65,"line":228},29,[63,230,231],{},"    \u003Cli v-for=\"(item, idx) in listArr\">\n",[63,233,235],{"class":65,"line":234},30,[63,236,204],{},[63,238,240],{"class":65,"line":239},31,[63,241,175],{},[63,243,245],{"class":65,"line":244},32,[63,246,181],{},[63,248,250],{"class":65,"line":249},33,[63,251,252],{},"  \u003C!-- object -->\n",[63,254,256],{"class":65,"line":255},34,[63,257,157],{},[63,259,261],{"class":65,"line":260},35,[63,262,263],{},"    \u003Cli v-for=\"(val, key, idx) in info\">\n",[63,265,267],{"class":65,"line":266},36,[63,268,269],{},"      \u003Ch1>{{ idx }}: {{ key }}: {{ val }}\u003C\u002Fh1>\n",[63,271,273],{"class":65,"line":272},37,[63,274,175],{},[63,276,278],{"class":65,"line":277},38,[63,279,181],{},[63,281,283],{"class":65,"line":282},39,[63,284,285],{},"\u003C\u002Ftemplate>\n",[287,288,289],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":59,"searchDepth":78,"depth":78,"links":291},[292,293],{"id":30,"depth":72,"text":30},{"id":52,"depth":72,"text":52},"Vue.js","2024-09-09","透過 v-for 迴圈指令，讓元素可以動態渲染數據。",false,"md",null,{},"\u002Fblog\u002Fvue\u002Fv-for",{"title":5,"description":296},"blog\u002Fvue\u002Fv-for",[305,306],"Vue","Frontend","2024-09-21","qTGVSw9NMjbDGC6KPFvhFI27oCNKs2VNG2P8yCrn2-g",1780512501692]