这篇文章主要介绍“vue怎么实现计算器封装”，在日常操作中，相信很多人在vue怎么实现计算器封装问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现计算器封装”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
效果如下：
文件目录
我们导入了四个js包，在下面有源代码，当前计算器页只有一个valculator.vue文件。
valculator.vue：<html代码>
template> <div class="about"> <h2>这是个计算器你信吗</h2> <van-cell-group type="text"> <van-field οninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g, '').replace(/^0{1,}/g,'')" v-model="inputValue" placeholder="请输入数字" /> </van-cell-group> <div > <van-grid clickable :column-num="4" :gutter="10"> <van-grid-item @click="onclick(i)" v-for="(num, i) in dataNum" :key="i" :text="dataNum[i]" /> </van-grid> </div> </div></template>valculator.vue：《js方法》
<script>// eslint-disable-next-line no-unused-varsimport { Field } from 'vant'export default { data () { return { // 数字加减乘除数组 dataNum: [ '+', '-', '*', '/', '1', '2', '3', '< X', '4', '5', '6', '=', '7', '8', '9', '0' ], inputValue: '', // input当前显示值 inputStorage: '', // input输入值存储 calculator: '', // 解析拿到的值 temporaryVariables1: '', // 存储临时计算拼接值1 temporaryVariables2: '', // 存储临时计算拼接值2 temporaryOperator: '' // 存储临时运算符 } }, methods: { // 点击事件 onclick (index) { this.parsing(index) // 解析当前的值 this.judge() // 判断进行运算 }, // 解析当前拿到的值 parsing (index) { switch (index) { case 4: this.calculator = '1' break case 5: this.calculator = '2' break case 6: this.calculator = '3' break case 8: this.calculator = '4' break case 9: this.calculator = '5' break case 10: this.calculator = '6' break case 12: this.calculator = '7' break case 13: this.calculator = '8' break case 14: this.calculator = '9' break case 15: this.calculator = '0' break case 0: this.calculator = '+' break case 1: this.calculator = '-' break case 2: this.calculator = '*' break case 3: this.calculator = '/' break case 11: this.calculator = '=' break case 7: this.calculator = 'X' this.Clear() break default: break } // this.outValue = this.calculator; // this.inputBox(); // console.log(this.calculator); }, // 判断是哪个运算符 judge () { if (this.calculator === '=') { this.equal() } else if (this.calculator === 'X') { this.Clear() } else { this.showOn() // 显示当前的值 this.calculation() // 计算当前的值 } }, // 计算当前的值 calculation () { // 如果为空表示当前为第一个运算符,否则开始计算 const vae = this.isNumber(this.calculator) // 判断当前输入值是否为数字 if (this.temporaryOperator === '') { if (vae === false) { this.temporaryOperator = this.calculator // 存储当前计算值 } else { this.temporaryVariables1 += this.calculator // 计算的值：加减触发前拼接的值 } } else { if (vae === false) { this.temporaryVariables1 = this.Retrieval.retrieval( this.temporaryOperator, this.temporaryVariables1, this.temporaryVariables2 ) // 如果当前有输入运算法调取加减乘除 this.assignmentConversion() // 清空第二个数 this.temporaryOperator = this.calculator // 计算完后保留当前的运算符 } else { this.temporaryVariables2 += this.calculator // 继续第二个拼接 } } }, // 判断是否为数字：“12.3”等都为true， “哈哈”、“12.33”等都为false isNumber (val) { var regPos = /^\d+(\.\d+)?$/ // 非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数 if (regPos.test(val) || regNeg.test(val)) { return true } else { return false } }, // 等于 equal () { this.temporaryVariables1 = this.Retrieval.retrieval( this.temporaryOperator, this.temporaryVariables1, this.temporaryVariables2 ) // 调取加减乘除 this.assignmentConversion() // 清空第二个数 this.inputValue = this.temporaryVariables1 // 将计算后的值显示在屏幕上 this.inputStorage = '' // 清空之前存储的值 }, // 清空第二个数 assignmentConversion () { this.temporaryVariables2 = '' // 第二个清空用来再次保留 }, // 清除显示的数据 Clear () { this.inputValue = '' // 显示的值 this.inputStorage = '' // input输入值存储 this.calculator = '' // 解析拿到的值 this.temporaryVariables1 = '' // 存储临时计算拼接值1 this.temporaryVariables2 = '' // 存储临时计算拼接值2 this.temporaryOperator = '' // 存储临时运算符 }, // 显示当前的值 showOn () { this.inputValue = this.inputStorage // 之前存储先赋给要显示的 this.inputValue += this.calculator // 要显示的值再次加上当前点击的值 this.inputStorage = this.inputValue // 同步要存储的值 } }}valculator.vue：《style》
<style scoped>div.inputAll { position: relative;}div.inputOne { position: absolute; top: 10%; }div.inputTwo { position: absolute; top: 15%;}div.inputLine { border-bottom: 1px solid gray; top: 12.5%; position: absolute;}</style>导入其他js文件:
retrieval.js：计算器加减乘除选择器
// eslint-disable-next-line no-unused-varsimport Add from '../valculator/add'// eslint-disable-next-line no-unused-varsimport Subtraction from '../valculator/subtraction'import Multiplication from '../valculator/multiplication'export default { retrieval: function (operator, variables1, variables2) { switch (operator) { case '+': // 调取公共加法 // eslint-disable-next-line no-undef variables1 = Add.add(variables1, variables2) break case '-': // 调取公共减法 // eslint-disable-next-line no-undef variables1 = Subtraction.subtraction(variables1, variables2) break // eslint-disable-next-line no-duplicate-case case '*': // 调取公共乘法 // eslint-disable-next-line no-undef variables1 = Multiplication.multiplication(variables1, variables2) break default: break } return variables1 }}add.js：加法操作
export default { add: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) + Number(addTwo) // 显示当前的值 return addOne }}multiplication.js：乘法操作
export default { multiplication: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) * Number(addTwo) // 显示当前的值 return addOne }}subtraction.js：减法操作
export default { subtraction: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) - Number(addTwo) // 显示当前的值 return addOne }}到此，关于“vue怎么实现计算器封装”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
