条件分岐を使ってみよう! その２

Vue.jsの問題に挑戦しよう！

問題

「条件分岐を使ってみよう! その２」

次はif~elseifを使って条件をもう一つ増やしてみよう。
表示されるパターンは3種類に増えるぞ。

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

あらかじめエディタに書くコード

                    <div id="app" 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>
<style>
  .text-card {
    width: 50%;
    margin: 30% auto;
    padding: 2rem;
    background: #40b983;
    color: #ffffff;
  }
  .text-card p:nth-child(1) {
    font-weight: bold;
    font-size: 2rem;
  }
</style>
¥Vue¥