用methods方法，computed计算属性，watch监听器写一个简易计算器

最新推荐文章于 2024-09-14 18:52:56 发布

键客·

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量56

点赞数

文章标签： javascript html 前端 vue.js

本文链接：https://blog.csdn.net/m0_70314630/article/details/129910338

版权

该代码示例展示了一个使用Vue.js框架构建的简单HTML页面，包含两个输入框用于输入数字，一个下拉菜单选择运算符，以及计算按钮和结果显示区。点击按钮后，根据用户选择的运算符进行加、减、乘、除运算，并实时更新计算结果和计算属性。同时，代码中还实现了对输入数据的侦听，每当输入值改变时，都会重新计算并更新结果。

摘要由CSDN通过智能技术生成

<!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="number1"/>
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<button @click="change">计算</button><br />
			计算结果：{{jieguo}}<br />
			计算属性：{{xxx}} <br />
			侦听器：{{yy}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				jieguo:0,
				yy:0,
				opt:"+"
			},
			methods:{
				change(){
					if(this.opt === '+'){
						this.jieguo = this.number1+this.number2
					}
					if(this.opt === '-'){
						this.jieguo = this.number1-this.number2
					}
					if(this.opt === '*'){
						this.jieguo = this.number1*this.number2
					}
					if(this.opt === '/'){
						this.jieguo = this.number1/this.number2
					}
				}
			},
			computed:{
				xxx(){
					return eval(this.number1 + `${this.opt}` + this.number2)
				}
			},
			watch: {
            number1(newNumBer, oldNumBer) {
                console.log("num1:", oldNumBer, newNumBer);
                this.yy = eval(this.number1 + this.opt + this.number2);
            },
            number2(newNumBer, oldNumBer) {
                console.log("num2:", oldNumBer, newNumBer);
                this.yy = eval(this.number1 + this.opt + this.number2);
            },
            opt(newOpt, oldOpt) {
                console.log("opt:", oldOpt, newOpt);
                this.yy = eval(this.number1 + this.opt + this.number2);
            }
        }
		})
	</script>
</html>