vue.js实现建议计算器

最新推荐文章于 2023-10-28 10:24:05 发布

abcd147s

最新推荐文章于 2023-10-28 10:24:05 发布

阅读量46

点赞数

文章标签： vue.js javascript servlet

本文链接：https://blog.csdn.net/abcd147s/article/details/129907597

版权

一、使用表达式实现计算器

用input输入框写数字，select写符号，用v-if计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<br />
			<div>
				<p v-if="opt=='+'">结果：{{number1+number2}}</p>
				<p v-if="opt=='-'">结果：{{number1-number2}}</p>
				<p v-if="opt=='*'">结果：{{number1*number2}}</p>
				<p v-if="opt=='/'">结果：{{number1/number2}}</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*"
			}
		})
	</script>
</html>

二、使用computed来实现计算器

前面内容不变多写一个结果的输出框，绑定result，随着opt执行相应的计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>computed</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="text" v-model="n1"/>
			 <select v-model="opt">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="text" v-model="n2"/>
			<input type="text" v-model="result"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					opt:'+'
				},
				computed:{
					result(){
						switch (this.opt) {
							case '+':
								return Number(this.n1) + Number(this.n2);
								break;
							case '-':
								return Number(this.n1) - Number(this.n2);
								break;
							case '*':
								return Number(this.n1) * Number(this.n2);
								break;
							case '/':
								return Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}
			})
		</script>
	</body>
</html>

三、使用methods方法实现计算器

给button设计点击事件，点击根据opt的参数执行进行运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>methods</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1">
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2">
			<button @click="fangfa">计算</button>
			<br/>
			<input type="text" v-model="result">
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					n1: 0,
					n2: 0,
					opt: '+',
					result: 0
				},
				methods: {
					fangfa() {
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}
			});
		</script>
	</body>
</html>

四、使用watch监听器实现计算器

使用监视器分别监视三个属性，任意一个变化调用watch1方法进行计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="text" v-model="n1" /> 
			 <select v-model="opt">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="text" v-model="n2" />
			<input type="text" v-model="result" />
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					result:null,
					opt:'+'
				},
				methods:{
					watch1(){
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				},
				watch:{
					n1:function(){
						this.watch1()
					},
					n2:function(){
						this.watch1()
					},
					opt:function(){
						this.watch1()
					}
				},
				created(){
					this.watch1()
				}
			})
		</script>
	</body>
</html>