Vue计算属性，事件监听的应用

最新推荐文章于 2024-09-12 16:43:23 发布

derest123

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量99

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/derest123/article/details/129927077

版权

通过input函数和v-model用于输入需要计算的数字并绑定数字。用select 元素中的option标签显示加减乘除操作符。代码如下:

引入vue，定义属性初始值和运算符号。

定义方法，实现数值的加减乘除运算。

定义计算属性，实现页面逻辑中加减乘除符号的切换

使用侦听器，这段侦听器的作用是根据数据对象中的变化，对 num3、num4 和 sign1 进行相应的数学运算，然后将运算结果存储在 res1 变量中

整体代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<input type="text" placeholder="请输入第一个数" v-model.number="num1">
		<select v-model="opt">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select>
		<input type="text" placeholder="请输入第二个数" v-model.number="num2"> <br>
		结果是:{{res}} <br>
		<input type="text" placeholder="请输入第一个数" v-model.number="num3">
		<select v-model="opt1">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select>
		<input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br>
		答案:{{res1}} <br>
		<input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change">
		<select v-model="opt2" @change="change">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select>
		<input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br>
		答案:{{res2}}
	</div>
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				num1: 0,
				num2: 0,
				num3: 0,
				num4: 0,
				num5: 0,
				num6: 0,
				opt: "+",
				opt1: "+",
				opt2: "+",
				res1: "",
				res2: ""
			},
			methods: {
				change() {
					if (this.opt2 == "+") {
						this.res2 = this.num5 + this.num6;
					} else if (this.opt2 == "-") {
						this.res2 = this.num5 - this.num6;
					} else if (this.opt2 == "*") {
						this.res2 = this.num5 * this.num6;
					} else if (this.opt2 == "/") {
						this.res2 = this.num5 / this.num6;
					}
				}
			},
			computed: {
				res() {
					if (this.opt == "+") {
						return this.num1 + this.num2;
					} else if (this.sign == "-") {
						return this.num1 - this.num2;
					} else if (this.sign == "*") {
						return this.num1 * this.num2;
					} else if (this.sign == "/") {
						return this.num1 / this.num2;
					}
				}
			},
			watch: {
				num3(val) {
					if (this.opt1 == "+") {
						this.res1 = val + this.num4;
					} else if (this.opt1 == "-") {
						this.res1 = val - this.num4;
					} else if (this.opt1 == "*") {
						this.res1 = val * this.num4;
					} else if (this.opt1 === "/") {
						this.res1 = val / this.num4;
					}
				},
				num4(val) {
					if (this.sign1 == "+") {
						this.res1 = this.num3 + val;
					} else if (this.sign1 == "-") {
						this.res1 = this.num3 - val;
					} else if (this.sign1 == "*") {
						this.res1 = this.num3 * val;
					} else if (this.sign1 == "/") {
						this.res1 = this.num3 / val;
					}
				},
				sign1(val) {
					if (val == "+") {
						this.res1 = this.num3 + this.num4;
					} else if (val == "-") {
						this.res1 = this.num3 - this.num4;
					} else if (val == "*") {
						this.res1 = this.num3 * this.num4;
					} else if (val == "/") {
						this.res1 = this.num3 / this.num4;
					}
				}
			}
		})
	</script>
</body>

</html>