v-if,v-else,v-else-ifの3つの組み合わせ - Computer programming and health

Vue.jsでの複雑な条件分岐に対応するv-else-ifについて。

「条件分岐と条件付きレタリングについて」(条件をふやす)

v-else-ifを使い

80点以上になれば「ランクA」、60点以上「ランクB」、60点未満「ランクC」と表示される。

=60″> ランクB

ランクC

HTML <div id=”app”>
<button class=”button” v-on:click=”increment”>+1</button>
<button class=”button” @click=”decrement”>-1</button>
<p>{{ count }}</p>
<p v-if=”count >=80″ class=”passed”> ランクA</p>
<p class=”green” v-else-if =”count >=60″> ランクB</p>
<p v-else > ランクC</p>
</div>

CSS .passed{
font-size: 24px;
color: #e74c3c;
}
.green {
color: green;
font-size: 18px;
}

Javascript new Vue({
el: ‘#app’,
data(){
return{
count:59
};
},
methods: {
increment(){
this.count++;
},
decrement(){
this.count–;
}
}
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。