この度Vue.jsを学び始めました。
その勉強内容をまとめます
v-for
HTML要素を繰り返し表示する時にv-forを使います。
Vue.js
//配列から順番に値を1つづつ取り出し表示する
<タグ v-for="変数 in 配列>
//指定した回数表示を繰り返す
<タグ v-for="変数 in 最大値>
//配列から値と番号を1つずつ取り出し表示する
＜タグ v-for="(変数,番号) in 配列">
使い方
Vue.js
//配列から1つずつ取り出す使い方
<div id="app">
<ul>
<li v-for="item in Array">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
Array:['いちご','メロン','バナナ','りんご']
}
})
</script>
上記のではArrayという配列にdataで配列データを用意しておき、それをv-forで順番に取り出し{{ item }}に入れて出力しています。
以下のようにすると配列データを番号付きで出力することもできます。
Vue.js
//配列から1つずつ取り出し、番号付きで表紙する
<div id="app">
<ul>
<li v-for="(item,index) in Array">{{ index }}:{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
Array:['いちご','メロン','バナナ','りんご']
}
})
</script>
以上です。