カウンタープログラムを作ってみよう！

Question

問題1：カウンタープログラムを作ってみよう！

見本の動画のようなカウントアップ＆カウントダウン
ができるプログラムを作ってみよう！

あらかじめエディタに書くコード

                <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¥

Answer 1

解答ソースコード

              <script>
var app = new Vue ({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    countUp: function() {
      this.count += 1
    },
    countDown: function() {
      this.count -= 1
    }
  }
})
</script>
¥Vue¥

カウンタープログラムを作ってみよう！

問題1：カウンタープログラムを作ってみよう！

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説