問題
5
Vue
条件分岐を使ってみよう! その２
Vueの問題に挑戦しよう！
問題
「条件分岐を使ってみよう! その２」
次は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¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
前回の問題にプラスしてif~elseifで条件を一つ増やした。
randomの値が`fun`だったら、それから`lazy`だった場合に表示する文字を変化させているぞ。
もちろん、どちらにもマッチしなかった場合は、elseの条件適用されることになる。
