vue版数字求和案例,解决select选择后number变为str的方式

写一个count组件：

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <select v-model="number">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
    <button @click="odd_add">当前求和为奇数再加</button>
    <button @click="wait">等3s再显示数据</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      number: 1, //用户选择的数字
      sum: 0, //当前的和
    };
  },
  methods: {
    add() {
      this.sum += this.number; //让number+1
      console.log(this.number);
    },
    reduce() {
      this.sum -= this.number; //让number-1
    },
    odd_add() {
      if (this.sum % 2) {
        this.sum += this.number;
      }
    },
    wait() {
      setTimeout(() => {
        this.sum += this.number; //让number+1
      }, 3000);
    },
  },
};
</script>

<style lang="css" scoped>
button {
  margin-left: 5px;
}
</style>

app.vue里引用这个组件:

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
	name:'App',
	components: {Count},
	}
</script>

知识点：

这里有一个小细节，通过select 选择过后里边的number数字就会变成字符型，导致出现点击2+1变成21而不是3，直接会拼接字符串。

这里可以采用 两种方式来解决： 

v-bind的方式   <option :value="1">1</option> 

 v-model.number的方式把收集到的东西强转为number类型

  <select v-model.number="number">