Vue
Googleでログイン問題5：条件分岐を使ってみよう! その２
次はif~elseifを使って条件をもう一つ増やしてみよう。
表示されるパターンは3種類に増えるぞ。
表示される文字のパターン
・NinjaCodeはすごく楽しい!
・NinjaCODEは退屈だ
・NinjaCODE 難しい
表示されるパターンは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¥
期待する画面
解答ソースコード
<script>
var app = new Vue ({
el: "#app",
data() {
return {
random: "fun",
}
}
})
</script>
¥Vue¥
完了にする！
活動記録をTweetする
randomの値が`fun`だったら、それから`lazy`だった場合に表示する文字を変化させているぞ。
もちろん、どちらにもマッチしなかった場合は、elseの条件適用されることになる。