ログイン
問題6

繰り返し処理をしてみよう!

アイコン画像

問題6:繰り返し処理をしてみよう!

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¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <script>
  var app = new Vue ({
    el: "#app",
    data: {
      hobbies: [
        { name: "Yoga" },
        { name: "Programming" },
        { name: "BaseBall" },
        { name: "Music" }
      ]
    }
  })
</script>
¥Vue¥
            

コメントのアイコン解説

まずはVue側でhobbiesという趣味のデータを用意して、用意したデータをv-forで繰り返し表示させているぞ。
v-for="hobby in hobbies"の部分が該当のコードだが、これはhobbiesというデータをhobbyに一つづつ格納している形になる。
そして{{ hobby.name }}として一つづつ格納したhobbyの名前を引っ張ってきているぞ。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!