Vue.jsの練習④

引き続き、忍者コードの練習問題を解いていきます。

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

やりたいこと

v-if文に比べてif~elseifを使って条件を増やす。表示されるパターンは3種類に増える。

表示される文字のパターン
・NinjaCodeはすごく楽しい!
・NinjaCODEは退屈だ
・NinjaCODE 難しい

HTML

<div id="app_4" class="text-card">
     <div v-if="random == 'fun'">
          <p>NinjaCodeはすごく楽しい!</p>
          <p>楽しく学べるプログラミング</p>
     </div>
     <div v-else-if="random == 'lazy'">
          <p>NinjaCODEは退屈だ</p>
          <p>非常に退屈だ...</p>
     </div>
     <div v-else="">
          <p>NinjaCODE 難しい</p>
          <p>難しいなあ</p>
     </div>
</div>

CSS

#app_4{
    width: 50%;
    margin: 30% auto;
    padding: 2rem;
    background: #40b983;
    color: #ffffff;
  }
#app_4 p:first-of-type {
    font-weight: bold;
    font-size: 2rem;
  }

Vue.js

var app4 = new Vue({
  el: "#app_4",
  data() {
      return {
          random: "fun", // "lazy" や 他の値に変えると表示が切り替わる
      };
  },
});

returnを使う理由

return はJavaScriptのキーワードで、「関数の結果を返す」ために使います。

Vue.jsで**dataを関数にしてreturn**する理由は、インスタンスごとに独立したデータを持たせるためです。

• オブジェクトを直接渡す場合（間違った例）：
  data: {
  　random: “fun”
  }
  → この書き方では、複数のVueインスタンスが同じデータオブジェクトを共有してしまい、データの衝突が発生する可能性があります。
• 関数で返す場合（正しい例）：
  data() {
　return {
　　　random: "fun"
　 };
}
→ この書き方なら、Vueインスタンスごとに独立したデータが確保されます。
  → 特に、Vueコンポーネントを複数作成するときに重要です。

Vue.jsでは、data() 関数が「このVueインスタンスが持つデータはこれですよ！」とVueに教えるためにreturnしています。

補足：「,」（カンマ）や「;」（セミコロン）

カンマとセミコロンは日本語で言うところの句読点です。