用计算属性、方法、侦听器、表达式四种方法完成简易计算器

最新推荐文章于 2024-08-15 11:09:53 发布
最新推荐文章于 2024-08-15 11:09:53 发布
阅读量56 收藏
点赞数 3
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69858813/article/details/129898873
版权

全部代码

表达式方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></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" />
        <button @click="m1" >计算</button>
        <br />
        <p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
        <p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
        <p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
        <p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            number1:0,
            number2:0,
            opt:"+",
            xianshi1:false,
            xianshi2:false,
            xianshi3:false,
            xianshi4:false
        },
        methods: {
            m1() {
                if (this.opt === "+") {
                this.xianshi1 = true;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "-") {
                this.xianshi1 = false;
                this.xianshi2 = true;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "*") {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = true;
                this.xianshi4 = false;
                } else {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = true;
                }
            }
        }
    })
</script>
</html>

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></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 />
			结果：{{change}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			computed:{
				change(){
					if(this.opt == "+"){
						return this.number1+this.number2
					}
					if(this.opt == "-"){
						return this.number1-this.number2
					}
					if(this.opt == "*"){
						return this.number1*this.number2
					}
					if(this.opt == "/"){
						return this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></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" />
			<button @click="change" >计算</button>
			<br />
			结果：<input type="text" v-model="number3" />
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			methods:{
				change(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

侦听器

<!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 />
			结果：{{number3}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				number3:0
			},
			watch:{
				number1(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				number2(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				opt(){
					
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

实现效果 

 表达式

屏幕录制 2023-04-01 162330

方法

屏幕录制 2023-04-01 163808

 侦听器、计算属性

屏幕录制 2023-04-01 163857

 代码实现

表达式

布局

  1. 布局我们使用一个div里面套两个input输入框同时使用v-model.number绑定
  2.  v-model.number 表示将表单元素的值转换为数字类型
  3. 然后再加一个select标签来写运算符并用v-model绑定
  4. 再加入1个p标签来写表达式并于v-show来控制那个表达式显示
<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" />
        <button @click="m1" >计算</button>
        <br />
        <p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
        <p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
        <p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
        <p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
    </div>

 vue部分

  1. 首先我们先引入vue
  2. 然后我们写三个自定义变量来绑定输入值和运算符 
  3. 在创建4个自定义变量来控制p标签的显示
  4. 再在methods里面写一个方法m1
  5. 在m1里面写if else来判断运算符
  6. 通过判断来决定表达式的显示
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            number1:0,
            number2:0,
            opt:"+",
            xianshi1:false,
            xianshi2:false,
            xianshi3:false,
            xianshi4:false
        },
        methods: {
            m1() {
                if (this.opt === "+") {
                this.xianshi1 = true;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "-") {
                this.xianshi1 = false;
                this.xianshi2 = true;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "*") {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = true;
                this.xianshi4 = false;
                } else {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = true;
                }
            }
        }
    })
</script>

方法

布局

布局方面基本和表达式一样只有结果是通过input输入框用v-model绑定来输入的 

<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" />
			<button @click="change" >计算</button>
			<br />
			结果：<input type="text" v-model="number3" />
		</div>

vue部分

这里我们通过if来判断运算符，通过this来给number3赋值实现 

<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			methods:{
				change(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>

计算属性、侦听器

布局方面都大差不差的我就不介绍了

计算属性vue

这里我们通过computed计算属性来写大致过程和方法大差不差只是结果是通过return来返回 

script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			computed:{
				change(){
					if(this.opt == "+"){
						return this.number1+this.number2
					}
					if(this.opt == "-"){
						return this.number1-this.number2
					}
					if(this.opt == "*"){
						return this.number1*this.number2
					}
					if(this.opt == "/"){
						return this.number1/this.number2
					}
				}
			}
		})
	</script>

侦听vue

watch侦听器 通过绑定值的变化来执行只要变化就执行一次通过if来判断执行那个

	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				number3:0
			},
			watch:{
				number1(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				number2(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				opt(){
					
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>

 我个人更推荐用计算属性简单方便，好了今天的分享就到这里，祝大家生活愉快！！！

 

 

 

 

 

 

打代码的上分王
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用计算属性、表达式、方法、侦听器四种方法完成简易计算器
m0_69858798的博客
04-02 57
在vue实例的对象computed中声明一个函数，这个函数的返回值return就是计算属性的属性值。使用两个input定义文本输入框，type属性值为text，v-model来绑定数值。通过if来判断运算符，通过this来给number3赋值实现。用watch监听data中的某一个数据变化。
用表达式、计算属性、方法、侦听器四种方法完成简易计算器
D1823806469的博客
04-02 34
!!!
Vue利用普通方法或计算属性或侦听属性实现简易计算器
weixin_71219164的博客
04-02 140
将计算结果设定为一个computed计算属性，使用eval和模板字符串计算表达式的值。Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。//默认选择的运算符 可以设置为 '','+','-','*','/','%'每当侦听的属性发生改变时，vue会执行该属性对应的函数。//表达式不完整时跳过运算。三、使用watch侦听属性。//第一输入框中的数字。//第二输入框中的数字。
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 177
Vue利用计算属性和侦听属性实现简易计算器
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
四、计算属性、方法和侦听器的区别 计算属性、方法和侦听器都是Vue框架中的一些机制，但是它们的使用场景和特点不同： * 计算属性：缓存，依赖项改变时重新计算，适用于计算复杂的逻辑。 * 方法：每次渲染时执行，...
深入浅析Vue.js计算属性和侦听器
10-18
只有在计算属性无法满足需求时，才考虑使用侦听器。 总的来说，Vue.js的计算属性和侦听器提供了强大的工具，用于处理数据的逻辑和响应性。计算属性适合用于基于现有数据生成新值，且有缓存优化；而侦听属性则适用于...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed ...理解并合理使用计算属性和侦听器，能够帮助我们更好地构建动态、响应式的Vue应用，同时优化性能。在实际开发中，应根据需求选择合适的方法来处理数据变化，以达到最佳效果。
Vue中的计算属性和侦听器有什么区别？
11-03
计算属性是一个用于实时计算和返回一个新的响应式属性的方法，而侦听器是一个用于观察一个或多个响应式数据的变化，并在数据发生变化时执行相应的操作。 计算属性的优点是可以对数据进行复杂的逻辑处理，而且在模板...
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
2301_78945238的博客
08-14 1117
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 280
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 596
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
JS（三）——更改html内数据
初叙
08-15 191
JavaScript更改html内数据
html+css+js网页制作 自定义电商10个页面
qq_42431718的博客
08-13 272
html+css+js网页制作 自定义电商10个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 411
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
html+css 实现hover 边框彩色按钮
宝码香车的博客
08-14 800
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
html+css+js网页设计 电商模版4个页面
qq_42431718的博客
08-13 342
html+css+js网页设计 电商模版4个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
HTML静态网页成品作业(HTML+CSS)——安徽宣笔设计制作(5个页面)
最新发布
2301_78945238的博客
08-15 447
HTML静态网页成品作业(HTML+CSS)——安徽宣笔设计制作(5个页面)
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 230
固定高度显示上下滑动。
计算属性和侦听器区别、使用场景
07-28
计算属性和侦听器是Vue.js框架中用来响应式更新视图的重要概念。它们在Vue项目开发中都是非常重要的知识点，并且在面试中经常被问到。下面是计算属性和侦听器的区别和使用场景： 1. 区别： - 计算属性是根据已有的响应式数据计算出一个新的值，并将其缓存起来，只有当依赖的响应式数据发生变化时，才会重新计算。计算属性适用于需要根据其他数据计算得出的值，例如对数据进行过滤、格式化等操作。 - 侦听器是用来监听某个特定的响应式数据的变化，并在数据变化时执行相应的操作。侦听器适用于需要在数据变化时执行异步或复杂的操作，例如发送网络请求、更新其他数据等。 2. 使用场景： - 计算属性适用于需要根据其他数据计算得出的值，并且这个值在多个地方被使用。例如，根据商品的数量和单价计算出总价，然后在多个地方展示总价。 - 侦听器适用于需要监听某个特定的响应式数据的变化，并在数据变化时执行相应的操作。例如，监听用户选择的城市变化，然后根据选择的城市发送网络请求获取该城市的天气信息。 综上所述，计算属性适用于需要根据其他数据计算得出的值，而侦听器适用于需要监听某个特定的响应式数据的变化。在实际开发中，根据具体的需求选择使用计算属性或侦听器可以提高代码的可读性和维护性。 #### 引用[.reference_title] - *1* *2* *3* [深入与浅谈 Vue 中计算属性和侦听器的区别和使用（Vue3版本为例）](https://blog.csdn.net/weixin_53231455/article/details/130377369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值