ログイン
問題4

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

アイコン画像

問題4:条件分岐を使ってみよう! その1

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¥
              

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


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

              var app = new Vue ({
  el: "#app",
  data: {
    show: false
  }
})
¥Vue¥
            

コメントのアイコン解説

この問題はv-bindの問題ができれば簡単だったかな?
v-ifで指定したshowをVueインスタンスの中でtrue/falseを
切り替えることで表示する文字を変化させることができるぞ。true/falseでスタイルを変更することは
よくあるから覚えておこう!
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
Vueを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる