Vue.jsでのV-if、v-elseを使い、条件付きレンダリング

Vue.jsを使ってボタンをクリックするたびに画面上で数値が加算されるカウンターアプリ

60点以上の時、メッセージを表示するようにする

HTML <div id=”app”>
<button class=”btn” @click=”increment”>+1</button>
<button class=”btn” @click=”decrement”>-1</button>
<p>{{ count }}</p>
<div v-if=”count >= 60″>合格です! </div>
</div>

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

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

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

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

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