Vueのv-forの使い方について理解したこと
前回の記事で理解が怪しいまま終わった「v-for」について
シンプルなコードに書くと理解出来た。
前回の記事
Vue.jsを初めて触ってみた
以下今回の内容↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Vueの練習</h1>
<div id="main">
<p>{{test}}</p>
<ul>
<li v-for='item in list'>{{item}}</li>
<!-- Vueの中で定義したlistという変数に指定された配列を繰り返し処理する -->
<!-- itemは配列の中身を表示する場所を{}で指定している -->
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:'#main',
data:{
test:'helo',
list:[1,2,3,4]
}
})
</script>
</body>
</html>
ポイントはココ！↓
html側
<li v-for='item in list'>{{item}}</li>
<!-- Vueの中で定義したlistという変数に指定された配列を繰り返し処理する -->
<!-- itemは配列の中身を表示する場所を{}で指定している -->
js側
new Vue({
el:'#main',
data:{
test:'helo',
list:[1,2,3,4]
}
})
つまり
〇〇 in ✖️✖️の
「✖️✖️」でjs側のdata内の配列を格納した変数を指定。
「〇〇」はその配列の内容を表示する場所をhtml側で{}で括って指定。
ここを押さえると理解できそうだ。