使用VueJs四种方法实现简易计算器功能

最新推荐文章于 2024-04-09 10:43:49 发布

Assbakae

最新推荐文章于 2024-04-09 10:43:49 发布

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Assbakae/article/details/129913930

版权

文章目录

前言

一、四种方法简介

1、Vue中的表达式

2、Vue中的方法(methods)

3、Vue中的计算属性(computed)

4、Vue中的监听属性(watch)

二、四种方法代码

1、表达式

2、方法（methods）

3、计算属性（computed）

4、监听器(watch)

前言

使用表达式、方法、计算属性、监听来实现计算机的功能

一、四种方法简介

1、Vue中的表达式

VueJS表达式写在双大括号内：{{ number }}。
VueJS表达式把数据绑定到 HTML。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

2、Vue中的方法(methods)

方法都是被Vue对象调用,所以方法中的this代表Vue对象
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体

3、Vue中的计算属性(computed)

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

4、Vue中的监听属性(watch)

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作，一对多；

二、四种方法代码

1、表达式

使用表达式来实现功能，data储存数据，将结果计算在显示在{{ }}，完成计算功能

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select>
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<br />
			+:{{number1+number2}}<br />
			-:{{number1-number2}}<br />
			x:{{number1*number2}}<br />
			÷:{{number1/number2}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0
			}
		});
	</script>
</html>

2、方法（methods）

为计算结果按钮设定点击事件，在methods中定义方法计算完成功能

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js">
			
		</script>
	</head>
	<body>
		<!-- 设置div -->
		<div id="app">
			<!-- 添加输入框并使用V-model进行绑定 -->
			<input type="text" placeholder="请输入"v-model.number="number1"/>
			<!-- 设置选择器 -->
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入"v-model.number="number2"/>
			<!-- 添加按钮并设置点击事件 -->
			<button @click="change">计算</button><br />
			<br />
			{{result}}
		</div>
	</body>
	<!-- 设置js -->
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:""
				
			},
			methods:{
				change(){
					switch(this.opt){
						case"+":
					    this.result =this.number1 +this.number2
						break;
						case"-":
						this.result =this.number1 -this.number2
						break;
						case"*":
						this.result =this.number1 *this.number2
						break;
						case"/":
						this.result =this.number1 /this.number2
						break;
				}
				}
			}
		})
	</script>
</html>

3、计算属性（computed）

和methods思路一样定义方法然后设定点击事件，计算数据将在计算属性中调用最终得出结果

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<button @click="jisuan">计算</button>
			<br />
			{{result}}<br />
 
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				result:0,
				opt:"+"
			},
			computed:{
				jisuan(){
					switch(this.opt){
						case"+":
						this.result=this.number1+this.number2;
						break;
						case"-":
						this.result=this.number1-this.number2;
						break;
						case"*":
						this.result=this.number1*this.number2;
						break;
						case"/":
						this.result=this.number1/this.number2;
						break;
					}
					return this.result;
				}
			}
		});
	</script>
</html>

4、监听器(watch)

定义watch方法能将结果计算出来，然后监听input输入框和opt属性变化，获取变化结果计算结果最后得到结果

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<br />
			{{result}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:""
			},
			watch:{
				number1:function(num1){
					switch(this.opt){
					case"+":
					this.result=num1+this.number2;
					break;
					case"-":
					this.result=num1-this.number2;
					break;
					case"*":
					this.result=num1*this.number2;
					break;
					case"/":
					this.result=num1/this.number2;
					break;
					}
				},
				number2:function(num2){
					switch(this.opt){
						case"+":
						this.result=this.number1+num2;
						break;
						case"-":
						this.result=this.number1-num2;
						break;
						case"*":
						this.result=this.number1*num2;
						break;
						case"/":
						this.result=this.number1/num2;
						break;
					}
				},
				opt:function(){
					switch(this.opt){
					case"+":
					this.result=this.number1+this.number2;
					break;
					case"-":
					this.result=this.number1-this.number2;
					break;
					case"*":
					this.result=this.number1*this.number2;
					break;
					case"/":
					this.result=this.number1/this.number2;
					break;
					}
				}
			}
		});
	</script>
</html>

Assbakae

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用VueJs四种方法实现简易计算器功能

使用表达式、方法、计算属性、监听来实现计算机的功能VueJS表达式写在双大括号内：{{ number }}。VueJS表达式把数据绑定到 HTML。VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。2、Vue中的方法(methods)方法都是被Vue对象调用,所以方法中的this代表Vue对象Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体3、Vue中的计算属性(computed)
复制链接

扫一扫