Vue.jsを学習する６、v-forで配列の要素数だけ表示する忘備録

Описание: v-forのチュートリアルを見ながら実装して動かしてみました。
配列のインデックスと要素(中身)の関係が、よくわかりました。

＜コード＞※＜＞は全角です
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞My first Vue app＜/title＞
＜script src="https://cdn.jsdelivr.net/npm/[email protected]"＞＜/script＞
＜style＞
.pinkBG {
background-color: lightpink;
}
＜/style＞
＜/head＞
＜body＞
＜div id="app"＞
＜h1 v-show="visbleTitle"＞Hello Vue＜/h1＞
＜div v-bind:class="vueClass"＞***********Fire*********＜/div＞
＜p v-if="num==0"＞
＜img v-bind:src="gazo"/＞
＜/p＞
＜p v-else-if="num==1"＞
＜a＞GooD＜/a＞
＜/p＞
＜p v-else＞
＜span v-bind:style="{ fontSize: size }"＞PG Box＜/span＞
＜/p＞
＜p v-for="(moji, index) in hako"＞
{{ index}} : {{ moji }}＜br＞
＜/p＞
＜/div＞

＜script src="https://unpkg.com/vue@3/dist/vue.glob..."＞＜/script＞
＜script＞
let visbleTitle = false;
const app = Vue.createApp({
data() {
return {
message: "Hello Vue!",
vueClass: 'pinkBG',
gazo: "http://zenryokuservice.com/wp/wp-cont...",
size: '12em',
num: 0,
hako: ["123", "234", "345", "456"]
}
}
})
app.mount('#app')
＜/script＞
＜/body＞
＜/html＞