Vue.js

「条件分岐と条件付きレタリングを理解しよう」| Conditional branching and conditional lettering in Vue.js

v-if, v-elseによる条件付きレタリング | Conditional lettering with v-if, v-else

60点以上になれば合格と表示される。| If it reaches 60 points or more, it is displayed as passing.

合格です！！ | Pass !!

おめでとうございます | Congratulations

これからも頑張りましょう | Let's continue to do our best

不合格 | Unqualified

HTML <div id="app">
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<p>｛｛ count ｝｝</p>

<div v-if="count >=60">
<p>合格です！！ | Pass !!</p>
<section class="red">
<h2>おめでとうございます | Congratulations</h2>
<p>これからも頑張りましょう | Let's continue to do our best</p>
</section >
</div>
<p v-else>不合格</p>

CSS .red {
color: red;
}

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

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

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー