Vue
LINEでログイン
Googleでログイン
Twitterでログイン
問題6：繰り返し処理をしてみよう！
v-for構文を使って見本のようなリストを作成してみよう！
表示させる文字や、cssスタイルは好きに変えてOK！
表示させる文字や、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¥
期待する画面
解答ソースコード
<script>
var app = new Vue ({
el: "#app",
data: {
hobbies: [
{ name: "Yoga" },
{ name: "Programming" },
{ name: "BaseBall" },
{ name: "Music" }
]
}
})
</script>
¥Vue¥
完了にする！
活動記録をTweetする
v-for="hobby in hobbies"の部分が該当のコードだが、これはhobbiesというデータをhobbyに一つづつ格納している形になる。
そして{{ hobby.name }}として一つづつ格納したhobbyの名前を引っ張ってきているぞ。