問題
1
Vue.js
カウンタープログラムを作ってみよう！
Vue.jsの問題に挑戦しよう！
問題
「カウンタープログラムを作ってみよう！」
見本の動画のようなカウントアップ＆カウントダウン
ができるプログラムを作ってみよう！
あらかじめエディタに書くコード
<div id="app">
<p>{{ count }}</p>
<button class="up" v-on:click="countUp">
プラス
</button>
<button class="down" v-on:click="countDown">
マイナス
</button>
</div>
<style>
p {
font-size:30px;
font-weight: bold;
}
button {
color: #fff;
border-radius: 5px;
padding: 10px;
}
button.up {
background: #40b983;
border: none;
}
button.down {
background: red;
border: none;
}
</style>
¥Vue¥
期待する画面
解答と解説（カウンタープログラムを作ってみよう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
問題９とほとんど同じ感じのコードになっているのに気づいていれば、徐々にVueに慣れてきている証拠。
countUpとcountDown両方のメソッドを用意して、それぞれ保持している
countsデータに対して１をプラス、マイナスにしているぞ。
