Vue 公式チュートリアル 〜 条件によって表示を変える
Vue 公式チュートリアル 〜 条件によって表示を変えるVue 公式チュートリアルのステップ6は、Javascript の条件によって表示の内容を変える事を学習します。前回までのポイントは?前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。今回学ぶのは?今回のステップ6の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。これが今回の変更前の課題のコードです。<script>export default { data() { return { awesome: true, }; }, methods: { toggle() { // ... }, },};</script><template> <button @click="toggle">toggle</button> <h1>Vue is
0