Vue CLI のサンプル（カウンター）

4597 ワード
button Vue.js vue-cli Web button テキストリンク

こちらと同じプログラムを vue-cli で書いてみました。
vue.js のサンプル　(button クリック)

src/App.vue
<template>
<div>
<button @click="green()">Green</button> {{counter_green}}<p />
<button @click="yellow()">Yellow</button> {{counter_yellow}}<p />
<button @click="red()">Red</button> {{counter_red}}<p />
<p />
<button @click="clear()">Clear</button><p />
Apr/7/2019<p />
</div>
</template>

<script>
export default {
  data () {
    return {
    counter_green: 0,
    counter_yellow: 0,
    counter_red: 0,
    }
  },
  methods: {
    green () {
      this.counter_green += 1
    },
    yellow () {
      this.counter_yellow += 1
    },
    red () {
      this.counter_red += 1
    },
    clear () {
      this.counter_green = 0
      this.counter_yellow = 0
      this.counter_red = 0
    },
  }
}
</script>

src/App.vue の使い方はこちら
Vue CLI の簡単な使い方