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

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

問題

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

v-if文を使って次の動画のような機能を実装してくれ。
true/falseで表示する文字を変化させてみよう！
表示する文字列は
・NinjaCODE 楽しい!!
・NinajCODE NinjaCODE 難しい....
の二つだ。

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

                    <div id="app">
  <div v-if="show">
      <p class="text text-success">NinjaCODE 楽しい!!</p>
  </div>
  <div v-else="">
      <p class="text text-danger">NinjaCODE 難しい....</p>
  </div>
</div>
<style>
  .text {
    margin: 30% auto;
    font-size: 2rem;
    text-align: center;
    border-bottom:2px solid #35495E;
    width: 50%;
  }
  .text-success {
    color: #40b983;
  }
  .text-danger {
    color: #F1936E;
  }
</style>
¥Vue¥