vue怎么实现计算器封装

vue怎么实现计算器封装

这篇文章主要介绍“vue怎么实现计算器封装”，在日常操作中，相信很多人在vue怎么实现计算器封装问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现计算器封装”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

效果如下：

文件目录

我们导入了四个js包，在下面有源代码，当前计算器页只有一个valculator.vue文件。

valculator.vue：<html代码>

template><divclass="about"><h2>这是个计算器你信吗</h2><van-cell-grouptype="text"><van-fieldοninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g,'').replace(/^0{1,}/g,'')"v-model="inputValue"placeholder="请输入数字"/></van-cell-group><div><van-gridclickable:column-num="4":gutter="10"><van-grid-item@click="onclick(i)"v-for="(num,i)indataNum":key="i":text="dataNum[i]"/></van-grid></div></div></template>

valculator.vue：《js方法》

<script>//eslint-disable-next-lineno-unused-varsimport{Field}from'vant'exportdefault{data(){return{//数字加减乘除数组dataNum:['+','-','*','/','1','2','3','<X','4','5','6','=','7','8','9','0'],inputValue:'',//input当前显示值inputStorage:'',//input输入值存储calculator:'',//解析拿到的值temporaryVariables1:'',//存储临时计算拼接值1temporaryVariables2:'',//存储临时计算拼接值2temporaryOperator:''//存储临时运算符}},methods:{//点击事件onclick(index){this.parsing(index)//解析当前的值this.judge()//判断进行运算},//解析当前拿到的值parsing(index){switch(index){case4:this.calculator='1'breakcase5:this.calculator='2'breakcase6:this.calculator='3'breakcase8:this.calculator='4'breakcase9:this.calculator='5'breakcase10:this.calculator='6'breakcase12:this.calculator='7'breakcase13:this.calculator='8'breakcase14:this.calculator='9'breakcase15:this.calculator='0'breakcase0:this.calculator='+'breakcase1:this.calculator='-'breakcase2:this.calculator='*'breakcase3:this.calculator='/'breakcase11:this.calculator='='breakcase7:this.calculator='X'this.Clear()breakdefault:break}//this.outValue=this.calculator;//this.inputBox();//console.log(this.calculator);},//判断是哪个运算符judge(){if(this.calculator==='='){this.equal()}elseif(this.calculator==='X'){this.Clear()}else{this.showOn()//显示当前的值this.calculation()//计算当前的值}},//计算当前的值calculation(){//如果为空表示当前为第一个运算符,否则开始计算constvae=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”等都为falseisNumber(val){varregPos=/^\d+(\.\d+)?$///非负浮点数varregNeg=/^(-(([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)){returntrue}else{returnfalse}},//等于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=''//存储临时计算拼接值1this.temporaryVariables2=''//存储临时计算拼接值2this.temporaryOperator=''//存储临时运算符},//显示当前的值showOn(){this.inputValue=this.inputStorage//之前存储先赋给要显示的this.inputValue+=this.calculator//要显示的值再次加上当前点击的值this.inputStorage=this.inputValue//同步要存储的值}}}

valculator.vue：《style》

<stylescoped>div.inputAll{position:relative;}div.inputOne{position:absolute;top:10%;/*border-bottom:1pxsolidgray;*/}div.inputTwo{position:absolute;top:15%;}div.inputLine{border-bottom:1pxsolidgray;top:12.5%;position:absolute;}</style>

导入其他js文件:

retrieval.js：计算器加减乘除选择器

//eslint-disable-next-lineno-unused-varsimportAddfrom'../valculator/add'//eslint-disable-next-lineno-unused-varsimportSubtractionfrom'../valculator/subtraction'importMultiplicationfrom'../valculator/multiplication'exportdefault{retrieval:function(operator,variables1,variables2){switch(operator){case'+'://调取公共加法//eslint-disable-next-lineno-undefvariables1=Add.add(variables1,variables2)breakcase'-'://调取公共减法//eslint-disable-next-lineno-undefvariables1=Subtraction.subtraction(variables1,variables2)break//eslint-disable-next-lineno-duplicate-casecase'*'://调取公共乘法//eslint-disable-next-lineno-undefvariables1=Multiplication.multiplication(variables1,variables2)breakdefault:break}returnvariables1}}

add.js：加法操作

exportdefault{add:function(addOne,addTwo){//eslint-disable-next-lineno-unused-varsaddOne=Number(addOne)+Number(addTwo)//显示当前的值returnaddOne}}

multiplication.js：乘法操作

exportdefault{multiplication:function(addOne,addTwo){//eslint-disable-next-lineno-unused-varsaddOne=Number(addOne)*Number(addTwo)//显示当前的值returnaddOne}}

subtraction.js：减法操作

exportdefault{subtraction:function(addOne,addTwo){//eslint-disable-next-lineno-unused-varsaddOne=Number(addOne)-Number(addTwo)//显示当前的值returnaddOne}}

到此，关于“vue怎么实现计算器封装”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！