Vue.js counter

by uto usui

HTML

<div id="app"></div>

Babel + JSX

let root = new Vue({

	data: () => {
    return {
      number: 0
    }
  },
  template:
    `<div>
    　<p>{{ number }}</p>
      <button type="button" @click="counter( 1 )">+</button>
      <button type="button" @click="counter( -1 )">-</button>
      <p v-if="number >= 1">正</p>
      <p v-if="number <= -1">負</p>
    </div>`,
  methods: {
    counter: function ( value ) {
      this.$data.number += value;
    }
  }
  
});

root.$mount( '#app' );