問題

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が届きます

問題9とほとんど同じ感じのコードになっているのに気づいていれば、徐々にVueに慣れてきている証拠。
countUpとcountDown両方のメソッドを用意して、それぞれ保持している
countsデータに対して1をプラス、マイナスにしているぞ。

さらにスキルアップしたい方は公式LINEから「Vue.js」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら