总以为自己还很年轻，却忽略了岁月的脚步，当身边的一道道风景变成了回忆，才忽然发现，风景依然在，而人已非少年。！！！

【22.求和案例--纯Vue版本】

• 太简单了，直接上代码案例

App.vue

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

Count.vue

• [【注意】value="1":绑定的是一个字符类型，需要把它转换成number类型

<template><div><h1>当前求和为：{{ sum }}</h1><!-- v-model.number: 双向数据绑定 + 将value值转换成number类型 --><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数时再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>
export default {name: 'Count',data() {return {n:1, //用户选择的数字sum:0 //当前的和};},methods: {increment() {this.sum += this.n;},decrement() {this.sum -= this.n;},incrementOdd() {if(this.sum%2){this.sum += this.n;}},incrementWait() {setTimeout(() => {this.sum += this.n;}, 500);},},
};
</script><style scoped>
button {margin-left: 10px;
}
select {margin-left: 20px;
}
</style>