Count计数器纯Vue版

<script>

export default {
  name: 'Count',
  data() {
    return {
      sum: 0,
      n: 1,
    }
  },
  methods: {
    increment() {
      this.sum += this.n
    },
    decrement() {
      this.sum -= this.n
    },
    incrementOdd() {
      if (this.n % 2 !== 0) {
        this.sum += this.n
      }
    },
    incrementAsync() {
      setTimeout(() => {
        this.sum += this.n
      }, 1000)
    }

  }
}
</script>

<template>
  <div>
    <h1>当前和为：{{ sum }}</h1>
    <select v-model="n">
      <option v-for="item in 3" :key="item" :value="item">
        + {{ item }}
      </option>
    </select>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementOdd">奇数加</button>
    <button @click="incrementAsync">延迟加</button>
  </div>
</template>

<style scoped>
* {
  margin: 5px;
  padding: 0;
}
</style>