Vue.jsの練習⑤

練習ページ：https://skblogwp.com/practice/javascript/article_008/

やりたいこと
HTML
CSS
Vue.js

やりたいこと

v-for構文を使って繰り返し処理を行なう。リストを作成する。

HTML

<ul id="app_5">
   <li class="hobby-card" v-for="hobby in hobbies" :key="hobby.name">
       {{ hobby.name }}
   </li>
</ul>

構文など	意味
v-for=”item in items”	`items`の配列をループして、`item`を1つずつ取り出す。今回の場合は、配列名は「hobbies」、配列の中の各要素は「hobby」と定義している。
:key=”item.name”	item（今回の場合はhobby）の中の、どの値をキーに区別するかを定義している。今回は、hobbyの中のnameで区別している。
{{ hobby.name }}	1つの要素の中の「name」を表示

CSS

#app_5 .hobby-card{
    width: 50%;
    padding: 1rem;
    margin: 1rem auto;
    color: #ffffff;
    background: #40b983;
    box-shadow: 2px 2px 4px #ddd;
    font-weight: bold;
}
#app_5 .hobby-card:hover{
    opacity: .8;
}

Vue.js

var app5 = new Vue({
  el: "#app_5",
  data() {
    return {
      hobbies: [
        { name: "Yoga" },
        { name: "Programming" },
        { name: "BaseBall" },
        { name: "Music" }
      ]
    };
  }
});

Vue.jsでやっているのは、配列名の定義（今回で言えば「hobbies」）と、配列の中にあるデータを定義。
最初、忍者コードの解説コードだと効かなかったので、「return」を入れることで効いた。
エディタでもreturnを入れないと、配列名「hobbies」がグレーアウトしていた。