VUE：用vue实现的计算器实例

最新推荐文章于 2024-04-30 17:26:41 发布
最新推荐文章于 2024-04-30 17:26:41 发布
阅读量3.7k 收藏 6
点赞数 2
分类专栏： vue vuex 计算器 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoxiaozhuang4/article/details/80256903
版权
vue 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
vuex
1 篇文章 0 订阅
订阅专栏
计算器
1 篇文章 0 订阅
订阅专栏

1. 闲暇时间做的vue计算器小实例。

2. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="1122.css"/>
	</head>
	<body>
		
		<div id="ad">
			<gxx-calculator></gxx-calculator>
		</div>
		
		<template id="key">
			<button :class="keyClass" @click="clickBtn">{{keyNumber}}</button>
		</template>
		
		<template id="keyGroup">
			<div>
				<div id="" class="keyShell" v-for="tmp in showArr">
					<gxx-key :key-number="tmp"></gxx-key>
				</div>
			</div>
		</template>
		
		<template id="keyGroups">
			<div class="keyGroup">
				<div v-for="tmp in showArrs">
					<gxx-key-group :show-arr="tmp"></gxx-key-group>
				</div>
			</div>
		</template>
		
		<template id="calculator">
			<div class="calculatorState">
				<div>
					<input type="text" :class="screenClass" v-model="showScreen" />
				</div>
				<gxx-key-groups></gxx-key-groups>
			</div>
		</template>
		
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js" type="text/javascript" charset="utf-8"></script>
		<script src="1122.js" type="text/javascript" charset="utf-8"></script>
		
	</body>
</html>

/*
 	
 * */

	.keyState {
		width: 80px;
		height: 80px;
		border-radius: 20%;
		outline: none;
		font-size: 2em;
		margin: 5px;
		vertical-align: top;
	}
	
	.keySmallShow {
		font-size: 1em;
	}
	
	.keyShell {
		display: inline-block;
	}
	
	.keyGroup {
		display: inline-block;
		margin: 10px;
	}
	
	.screenState {
		display: inline-block;
		box-sizing: border-box;
		margin: 20px 10px;
		padding: 1rem;
		font-size: 1.5rem;
		text-align: right;
		width: 360px;
		height: 60px;
		border-radius: 10px;
		outline: none;
		box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
	}
	
	.calculatorState {
		display: inline-block;
		padding: 20px 10px 10px 10px;
		border: 4px solid #dddddd;
		border-radius: 5%;
		background-color: rgba(221, 221, 221, 0.5);
	}

/*
 
 * */
	
	var store = new Vuex.Store({
		state: {
			screenShow: 0,
			initNum: 0,
			computedSymbol: '',
			resultCount: 0,
			computedNum: '',
			addFlag: false
		},
		mutations: {
			addNum: function(state, n) {
				
				if(state.computedSymbol !== '' && !state.addFlag) {
					state.screenShow = 0
					state.addFlag = true
				}
				
				//限制位数
				var val = state.screenShow + ''
				var integer = val.split('.')[0]
				var decimal = val.split('.')[1]
				
				if(!/\./g.test(val) && integer.length > 7 && !/\./.test(n))
					return false
				if(decimal !== undefined &&　decimal.length > 5)
					return false

				if(state.screenShow == 0)
					state.screenShow += n
				else
					state.screenShow += '' + n
			},
			clearNum: function(state) {
				state.screenShow = 0
				state.initNum = 0
				state.computedSymbol = ''
				state.resultCount = 0
				state.computedNum = ''
				state.addFlag = false
			},
			computeNum: function(state, n) {
				state.initNum = state.screenShow
				state.computedSymbol = n
				
				//继续计算
				state.addFlag = false
				state.resultCount = 0
				
			},
			resultNum: function(state) {
				
				function comput(num1, num2, sym) {
				
					var l1 = (num1 + '').indexOf('.') > -1 ? (num1 + '').split('.')[1].length : 0
					var l2 = (num2 + '').indexOf('.') > -1 ? (num2 + '').split('.')[1].length : 0
				
					var flag = Math.pow(10, Math.max(l1, l2))
				
					var result = eval('(num1*flag' + sym + 'num2*flag)/flag')
					if(/\*|\//.test(sym))
						result = result/flag
			
					return result
				}
				
				if(state.resultCount === 0) {
					state.computedNum = state.screenShow
					state.screenShow = comput(state.initNum, state.computedNum, state.computedSymbol)
				} else {
					state.screenShow = comput(state.screenShow, state.computedNum, state.computedSymbol)
				}
				state.resultCount ++
			},
			backSpace: function(state) {
				var tmp = state.screenShow
				state.screenShow = tmp.slice(0, tmp.length - 1)
			},
			precentNum: function(state) {
				state.screenShow = state.screenShow / 100
			},
			forMyLove: function(state) {
				state.screenShow = 'For My Love XiangXiang.'
			}
		}
	})

	var key = {
		props: ['keyNumber'],
		data: function() {
			return {
				keyClass: {
					keyState: true,
					keySmallShow: false
				}
			}
		},
		template: '#key',
		mounted: function() {
			var len = (this.keyNumber + '').length
			if(len > 2)
				this.keyClass.keySmallShow = true
		},
		computed: {
			screenShow: function() {
				return store.state.screenShow
			}
		},
		methods: {
			clickBtn: function(e) {
				console.log(this.keyNumber)
				if(typeof this.keyNumber == 'number' || !/\./g.test(this.screenShow) && this.keyNumber == '.') {
					if(store.state.resultCount > 0)
						store.commit('clearNum')
					store.commit('addNum', this.keyNumber)
				}
				if(/AC/.test(this.keyNumber))
					store.commit('clearNum')
				if(/[+|\-|*|/]/g.test(this.keyNumber))
					store.commit('computeNum', this.keyNumber)
				if(/=/.test(this.keyNumber))
					store.commit('resultNum')
				if(/X/.test(this.keyNumber))
					store.commit('backSpace')
				if(/%/.test(this.keyNumber))
					store.commit('precentNum')
				if(/by c/.test(this.keyNumber))
					store.commit('forMyLove')
			}
		}
	}
	
	var keyGroup = {
		props: ['showArr'],
		components: {
			'gxx-key': key
		},
		template: '#keyGroup'
	}
	
	var keyGroups = {
		data: function() {
			return {
				showArrs: {
					showArr1: ['AC', 'X', '/', '*'],
					showArr2: [7, 8, 9, '-'],
					showArr3: [4, 5, 6, '+'],
					showArr4: [1, 2, 3, '='],
					showArr5: ['%', 0, '.', 'by c']
				}
			}
		},
		template: '#keyGroups',
		components: {
			'gxx-key-group': keyGroup
		}
	}
	
	var calculator = {
		template: '#calculator',
		data: function() {
			return {
				screenClass: {
					screenState: true
				}
			}
		},
		computed: {
			showScreen: function() {
				return store.state.screenShow
			}
		},
		components: {
			'gxx-key-groups': keyGroups
		}
	}

	var vue = new Vue({
		el: '#ad',
		components: {
			'gxx-calculator': calculator
		}
	})


Koon_AgueroAgnis
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轻松运用Vue实现加，减，乘，除
m0_52960319的博客
12-10 1万+
引用vue.js <script src="./js/vue.js"></script> html部分构造页面 <div id="app"> <input type="text" v-model="num"> <input type="text" v-model="num1"> <select v-model="opt"> <option value="+"
利用vue.js实现一款简易计算器
fasdfdssdf的博客
03-11 1896
利用vue.js实现一款简易计算器可多则混合运算（加减乘除） vue计算器完整代码如下： <template> <view> <view class="calculatorBox"> <view class="colseImg"> <view class="titPopup"> 计算器 </v...
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2365
vue使用三种方法实现一个简单的计算器
Vue3+Pinia 实现计数器案例（#仅学习）
最新发布
BelleLinQ的博客
04-30 810
Pinia+Vu3： State/Getter/action的使用
vue-简易计算机.docx
11-10
实现简单的计算器
Vue实现简单计算器案例
01-19
利用Vue.js写的一个简单的计算器。非常简单的案例。 通过这个案例，练习一下Vue的语法。 通过案例可以看出，Vue.js解放了DOM操作。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Vue计算器</title> </head> <body> <input type=number v-model=num1> <select v-model=operation> + <option v
Vue.js实现的计算器功能完整示例
10-18
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
vue.js实现简单的计算器功能
10-15
总的来说，这个简单的 Vue.js 计算器实例展示了 Vue.js 如何与 DOM 进行交互、如何处理用户输入以及如何定义和调用方法来响应用户操作。这只是一个基本的应用，但足以帮助开发者了解 Vue.js 的核心概念，如数据绑定...
vue-calculator:使用Vue 2的简单计算器
05-06
在"vue-calculator: 使用Vue 2的简单计算器"项目中，开发者利用Vue 2的特性创建了一个直观、易于使用的计算器应用。这个计算器主要由HTML、CSS和JavaScript（Vue.js）组成，展示了如何在实际项目中整合Vue的基本组件...
使用Vue实现简单计算器
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个简单的计算器应用。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加容易和直观。在这个实例中，...
Vue实现计算器计算效果
10-14
至此，一个基本的Vue计算器已经实现。这个计算器能够接收数字输入，执行加、减、乘、除等基本运算，并提供清除和退格功能。当然，实际应用中可能需要考虑更多细节，如错误处理、小数点输入、百分比计算等，但以上...
制作一个简单的计算器使用Vue
m0_62330492的博客
07-08 439
制作一个简易的计算器使用VUE，制作一个简易的Vue计算机 首先就是由用户去输入值 ，是两个值，然后就是运算符，这里运算符是死的，我们只需在代码中做判断 由用户选择就好了
用vue实现一个计算器
m0_53855951的博客
05-08 846
用vue实现一个计算器 <!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&g
vue制作优雅的拟态化微立体计算器
你好呀，很高兴你在看这里~
07-20 1597
一.话不多，先看效果：  这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）： 二.超级详细的制作过程： 1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性
vue3 实现 计算器案例
前端开发小白9527
03-24 2732
注：功能并不完整，主要练习vue3的书写方式 <template> <h3 class="title">计算器</h3> <div class="MyComputed"> <div class="result"> <div class="text"> <el-tag type="" v-model="result">{{ result }}</el-tag>
使用vue实现简单计算器
weixin_53273727的博客
03-24 1800
使用vue实现简单计算器 这个简单的例子意在了解vue中的v-for、v-model内置指令的使用 以下是效果图 （我将其命名为“廉价计算器”）（QAQ） html代码块 <div id="app"> <input type="number" v-model.number="sum_1" placeholder="请输入数值"/> <select v-model="symbol"> <option v-for="(item,key) in list">
vue 实现简单的计算器
Cheng_May的博客
08-13 5531
&lt;body&gt; &lt;div id="app"&gt; &lt;h5&gt; {{ msg }}&lt;/h5&gt; &lt;input type="text" v-model="n1" /&gt; &lt;select v-model="opt"&gt; &lt;option v
vue实现简易计算器
weixin_44769592的博客
07-23 754
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>v-model的应用 计算器</title> <sc...
VUE案例-做一个计算器
YuKing_HONG的博客
03-10 271
在学习过程中有很多问题： 1.布局，浮动。以最后一个为主。同一排元素abc都设置了float：right，c会排第一个。 2.按钮点击过后有一个黑色边框线，需要默认样式。 /*取消button点击的默认样式*/ button:focus{ border:0none; outline:none;} 3.操作对象的里面数据的时候 需要用this这个。 4.代码书写规则问题，对象的多个变量要用逗号“，”隔开。 总结...
vue.js 实现计算器
04-20
你可以创建一个Vue实例来管理应用的状态，并且使用计算属性来计算结果。下面是一个简单的示例代码： HTML： ``` (button)"> {{button}} ``` JavaScript: ``` var calculator = new Vue({ el: '#...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值