前端vue入门(纯代码)20-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端vue入门(纯代码)20。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

前端vue入门(纯代码)20,Vue前端,vue.js,前端,javascript

App.vue

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

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

Count.vue文章来源地址https://www.toymoban.com/news/detail-522739.html

[【注意】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>