問題
6
Vue
繰り返し処理をしてみよう！
Vueの問題に挑戦しよう！
問題
「繰り返し処理をしてみよう！」
v-for構文を使って見本のようなリストを作成してみよう！
表示させる文字や、cssスタイルは好きに変えてOK！
あらかじめエディタに書くコード
<ul id="app">
<li class="hobby-card" v-for="hobby in hobbies" :key="hobby.name">
{{ hobby.name }}
</li>
</ul>
<style>
.hobby-card {
width: 50%;
padding: 1rem;
margin: 1rem auto;
color: #ffffff;
background: #40b983;
box-shadow: 2px 2px 4px #ddd;
font-weight: bold;
}
.hobby-card:hover {
opacity: .8;
}
</style>
¥Vue¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
まずはVue側でhobbiesという趣味のデータを用意して、用意したデータをv-forで繰り返し表示させているぞ。
v-for="hobby in hobbies"の部分が該当のコードだが、これはhobbiesというデータをhobbyに一つづつ格納している形になる。
そして{{ hobby.name }}として一つづつ格納したhobbyの名前を引っ張ってきているぞ。
