vue:计算属性和监听属性实现简单计算功能

每天都要做的更好

已于 2023-09-09 14:45:42 修改

阅读量134

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

于 2023-09-09 14:45:23 首次发布

本文链接：https://blog.csdn.net/m0_63715487/article/details/132777267

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要求：
1、初始状态下，三个按钮均显示数字 0，下方文字提醒“0 就不用计算啦！”；

2、点击下方三个按钮中的任意一个，按钮中的数字会+1，下方自动计算出三个数字的和;

3、要求分别使用 Vue.js 的计算属性和监听属性实现上述功能；除按钮可绑定函数外，计算功能不允许使用函数方法；
4、两种实现方式写在同一个页面上；

答案：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<h2>Vue：计算属性实现简单计算功能</h2>
				<button @click="add(1)">{{num1}}</button>
				<button @click="add(2)">{{num2}}</button>
				<button @click="add(3)">{{num3}}</button>
				<p>{{getSum}}</p>
			</div>
			<div>
				<h2>Vue：监听属性实现简单计算功能</h2>
				<button @click="add(4)">{{num4}}</button>
				<button @click="add(5)">{{num5}}</button>
				<button @click="add(6)">{{num6}}</button>
				<p>{{jiantingSum}}</p>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					num1: 0,
					num2: 0,
					num3: 0,
					num4: 0,
					num5: 0,
					num6: 0,
					jiantingSum: "0就不用计算了！"
				},
				methods: {
					add(a) {
						//如果是1号按钮，我应该操作num1 = num1 + 1
						// num1 ->  'num' + a
						var x = "num" + a
						this[x]++
					},
					qiuhe (a, b, c) {
						//如果传递进来的三个参数同时为0，返回不用计算了，否则返回求和结果
						if (a == 0 && b == 0 && c == 0) {
							return "0就不用计算了！"
						} else {
							var temp = a + b + c
							return '求和结果:' + temp
						}
					}
				},
				computed: {
					getSum() {
						var t = this.qiuhe(this.num1, this.num2, this.num3)
						return t
					}
				},
				watch: {
					num4() {
						this.jiantingSum = this.qiuhe(this.num4, this.num5, this.num6)
					},
					num5() {
						this.jiantingSum = this.qiuhe(this.num4, this.num5, this.num6)
					},
					num6() {
						this.jiantingSum = this.qiuhe(this.num4, this.num5, this.num6)
					}
				}
			});
		</script>
	</body>
</html>