分别使用方法，watch监听属性和计算属性写一个简易的计算器

最新推荐文章于 2024-07-12 10:43:17 发布
最新推荐文章于 2024-07-12 10:43:17 发布
阅读量89 收藏
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77117943/article/details/129902639
版权

首先实例化vue对象，然后两个<input>表单控件来存放我们的两个数字。用placeholder提示文本提示用户输入数字，用v-model来实现数据的双向绑定

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.js"></script>
		<meta charset="utf-8" />
		<title></title>
	</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"/>
			<button @click="change" >计算</button><br/>
			结果：{{result}}<br/>
			
		</div>
		
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				num1:'',
				num2:'',
				opt:"+",
				result:""
				
			},

第一种方法(利用methods)

methods: {
				change() {
					if( this.opt=="+"){
						this.result=this.num1+this.num2;
					}
					if( this.opt=="-"){
						this.result=this.num1-this.num2;
					}
					if( this.opt=="*"){
						this.result=this.num1*this.num2;
					}
					if( this.opt=="/"){
						this.result=this.num1/this.num2;
					}
					
				}
			},

第一种方法最终代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.js"></script>
		<meta charset="utf-8" />
		<title></title>
	</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"/>
			<button @click="change" >计算</button><br/>
			结果：{{result}}<br/>
			
		</div>
		
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				num1:'',
				num2:'',
				opt:"+",
				result:""
				
			},
			methods: {
				change() {
					if( this.opt=="+"){
						this.result=this.num1+this.num2;
					}
					if( this.opt=="-"){
						this.result=this.num1-this.num2;
					}
					if( this.opt=="*"){
						this.result=this.num1*this.num2;
					}
					if( this.opt=="/"){
						this.result=this.num1/this.num2;
					}
					
				}
			},
		})
	</script>
	
</html>

第二种方法（利用watch监听）

watch:{
				num1:function(val){
					if(this.opt=="+"){
					this.result=val+this.num2;
					}
					if(this.opt=="-"){
					this.result=val-this.num2;
					}
					if(this.opt=="*"){
					this.result=val*this.num2;
					}
					if(this.opt=="/"){
					this.result=val/this.num2;
					}
					
				},
				num2:function(val){
					if(this.opt=="+"){
						this.result=this.num1+val;
					}
					if(this.opt=="-"){
						this.result=this.num1-val;
					}
					if(this.opt=="*"){
						this.result=this.num1*val;
					}
					if(this.opt=="/"){
						this.result=this.num1/val;
					}
				},
				opt:function(val){
					if(val=="+"){
						this.result=thi.num1+this.num2;
					}
					if(val=="-"){
						this.result=thi.num1-this.num2;
					}
					if(val=="*"){
						this.result=thi.num1*this.num2;
					}
					if(val=="/"){
						this.result=thi.num1/this.num2;
					}
					
				}
			},

第二种最终代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.js"></script>
		<meta charset="utf-8">
		<title></title>
	</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>
			结果：{{result}}
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				num1:'',
				num2:'',
				opt:"+",
				result:""
			},
			watch:{
				num1:function(val){
					if(this.opt=="+"){
					this.result=val+this.num2;
					}
					if(this.opt=="-"){
					this.result=val-this.num2;
					}
					if(this.opt=="*"){
					this.result=val*this.num2;
					}
					if(this.opt=="/"){
					this.result=val/this.num2;
					}
					
				},
				num2:function(val){
					if(this.opt=="+"){
						this.result=this.num1+val;
					}
					if(this.opt=="-"){
						this.result=this.num1-val;
					}
					if(this.opt=="*"){
						this.result=this.num1*val;
					}
					if(this.opt=="/"){
						this.result=this.num1/val;
					}
				},
				opt:function(val){
					if(val=="+"){
						this.result=thi.num1+this.num2;
					}
					if(val=="-"){
						this.result=thi.num1-this.num2;
					}
					if(val=="*"){
						this.result=thi.num1*this.num2;
					}
					if(val=="/"){
						this.result=thi.num1/this.num2;
					}
					
				}
			},
			
		
			
		})
	</script>
</html>

第三种（利用computed计算方法）

computed: {
				result(){
					if(this.opt=="+"){
						return this.num1+this.num2;
					}else if(this.opt=="-"){
						return this.num1-this.num2;
					} else if(this.opt=="*"){
						return this.num1*this.num2;
					}else if(this.opt=="/"){
						return this.num1/this.num2;
					}
					
				}
			}

第三种最终代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.js"></script>
		<meta charset="utf-8">
		<title></title>
	</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" />
			
			结果：{{result}}
			
		</div>
		
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				num1:'',
				num2:'',
				opt:"+",
				
				
				},
			computed: {
				result(){
					if(this.opt=="+"){
						return this.num1+this.num2;
					}else if(this.opt=="-"){
						return this.num1-this.num2;
					} else if(this.opt=="*"){
						return this.num1*this.num2;
					}else if(this.opt=="/"){
						return this.num1/this.num2;
					}
					
				}
			}
			
			
			})
			
	</script>
</html>

 运行效果（当输入数字后点击不同的运算符时将进行相应的运算，并将结果显示出来）

 

＠freedom＠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 170
Vue利用计算属性和侦听属性实现简易计算器
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
利用computed计算属性和watch监听属性制作一个简易计算器
qq_63663070的博客
04-02 237
利用Vue里的computed和watch属性，制作一个简易的计算器。
用vue js实现简易的计算器（computed，watch，methods三种方法）
2301_77166792的博客
04-02 383
2 分别写computed，watch，methods三种方法。符号的切换用select和option标签实现。创建vue实例 连接app 写入三种方法的数据。每个方法使用input标签制作输入框。这样用三种方法制作的计算机就完成啦。写computed方法。
watch监听器与computed计算属性项目实战
AnYingLester的博客
11-25 311
项目导航栏有一个首页点击按钮，侧边栏也有首页点击按钮与若干个其他选项按钮。在实现点击首页按钮导航栏的首页按钮必须出现阴影，点击侧边栏其他按钮时，导航栏按钮阴影需消失，如下图所示：由于首页的按钮与侧边栏按钮在两个不同的组件，两个组件的数据也只能通过vuex存储，组件想要访问数据，可以使用computed属性存储数据，使用watch监听属性监听在点击侧边栏时数据的变化。 在侧边栏按钮组件如下图设置： 在activeMenu方法中由于可以获取route可以得到path。在data属性中定义path将route中
Vue使用方法、计算属性、watch状态监听制作一个简易的计算器。
2201_75322765的博客
04-01 195
我们创建一个 Vue 实例，并定义了四个数据属性：num1，num2，operator 和 result。我们使用了 watch 监听器来监听 num1，num2 和 operator 的变化，并在任何一个变化时调用 changes 方法来计算结果并将其更新到 result 数据属性中。这个代码中，我们创建一个 Vue 实例，它有四个数据属性：num1，num2，opt 和 result。最终结果存储在 result 数据属性中，我们使用双花括号语法来将其显示在页面上。
vue 用watch监听事件 写一个简易计算器
菜鸟不菜
11-23 567
vue事件监听 （watch）
使用计算属性写简易计算器
sslcsq的博客
12-18 475
简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
运用vue中的方法，监听属性和计算属性三种方法实现简单——计算器
m0_69775127的博客
04-01 410
同时，使用了Vue的侦听方法，监听num1、num2和operator的变化，一旦发生变化就会触发calculate（）方法重新计算结果并更新result的值。同时，使用了Vue的computed方法，通过返回计算结果来自动计算并更新result的值。它的使用方法类似于data属性，但是计算属性的值是根据其他属性的值计算出来的，而不是直接赋值的。computed属性的优点在于，它们可以根据其他属性的值自动更新自己的值，这使得在模板中使用计算属性可以获得更高的性能和更好的代码组织结构。
Vue使用watch监听一个对象中的属性的实现方法
10-17
主要介绍了Vue使用watch监听一个对象中的属性的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
分别使用VUE的表达式、方法、计算属性、监听器实现计算器功能
04-02
本示例将详细介绍如何使用Vue的表达式、方法、计算属性和监听器来实现一个基础的计算器功能。 首先，Vue的**表达式**是用于在模板中进行简单的数据绑定。它们通常出现在双大括号`{{ }}`中，用于显示数据模型中的值...
Angular中使用$watch监听object属性值的变化(详解)
12-29
但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码： <body> <input id=myText type=text ng-model=person.name/> <h2>{{person}} <h2>Status: {{status
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 188
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 165
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
最新发布
专注基础架构领域
07-12 345
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName： ``` First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值