Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve calculator encapsulation in vue". In daily operation, I believe many people have doubts about how to achieve calculator encapsulation in vue. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve calculator encapsulation in vue". Next, please follow the editor to study!

The effect is as follows:

File directory

We have imported four js packages, with the source code below, and the current calculator page has only one valculator.vue file.

Valculator.vue:

Template > it's a calculator. Can you believe it?

Valculator.vue: "js method"

/ / eslint-disable-next-line no-unused-varsimport {Field} from 'vant'export default {data () {return {/ / numeric addition, subtraction, multiplication and division array dataNum: [' +','-','*','/','1','2','3','< Xbox,'4' / / input current display value inputStorage:'', / / input input value stores calculator:'', / / parses the obtained value temporaryVariables1:'' / / Storage temporary calculation concatenation value 1 temporaryVariables2:'', / / Store temporary calculation stitching value 2 temporaryOperator:''/ / Store temporary operator}}, methods: {/ / Click event onclick (index) {this.parsing (index) / / parse the current value this.judge () / / determine the operation} / / parse the current value 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) }, / / determine which operator judge () {if (this.calculator ='=') {this.equal ()} else if (this.calculator ='X') {this.Clear ()} else {this.showOn () / display the current value this.calculation () / / calculate the current value} / / calculate the current value calculation () {/ / if empty means it is currently the first operator Otherwise, start calculating const vae = this.isNumber (this.calculator) / / determine whether the current input value is numeric if (this.temporaryOperator = ='') {if (vae = false) {this.temporaryOperator = this.calculator / / store the currently calculated value} else {this.temporaryVariables1 + = this.calculator / / calculated value: add or subtract the stitched value before triggering }} else {if (vae = false) {this.temporaryVariables1 = this.Retrieval.retrieval (this.temporaryOperator) This.temporaryVariables1 This.temporaryVariables2) / / if there is an input operation algorithm to call addition, subtraction, multiplication and division this.assignmentConversion () / / clear the second number this.temporaryOperator = this.calculator / / retain the current operator} else {this.temporaryVariables2 + = this.calculator / / continue the second concatenation} / / determine whether it is a number: "12.3" and so on are all true "", False isNumber (val) {var regPos = / ^\ d + (\.\ d +)? $/ / non-negative floating point number var regNeg = / ^ (- ((0-9) +\. [0-9] * [1-9] [0-9] *) | ([0-9] * [1-9] *. [0-9] +) | -9] [0-9] *)) $/ / negative floating point if (regPos.test (val) | | regNeg.test (val)) {return true} else {return false}} / / equal to equal () {this.temporaryVariables1 = this.Retrieval.retrieval (this.temporaryOperator, this.temporaryVariables1, this.temporaryVariables2) / / call addition, subtraction, multiplication and division this.assignmentConversion () / / clear the second number this.inputValue = this.temporaryVariables1 / / display the calculated value on the screen this.inputStorage ='/ / the value stored before emptying} / / clear the second number assignmentConversion () {this.temporaryVariables2 =''/ / the second number is used to retain again} / / clear the displayed data Clear () {this.inputValue =''/ / displayed value this.inputStorage =''/ / input input value Storage this.calculator =''/ / parse the obtained value this.temporaryVariables1 =''/ / store the temporary calculation splicing value 1 this.temporaryVariables2 ='/ / store the temporary calculation splicing value 2 This.temporaryOperator =''/ / Store temporary operator} / / display the current value showOn () {this.inputValue = this.inputStorage / / before storage is first assigned to the this.inputValue + = this.calculator / / the value to be displayed plus the value currently clicked this.inputStorage = this.inputValue / / synchronize the value to be stored}

Valculator.vue: "style"

Div.inputAll {position: relative;} div.inputOne {position: absolute; top: 10%; / * border-bottom:1px solid gray; * /} div.inputTwo {position: absolute; top: 15%;} div.inputLine {border-bottom:1px solid gray; top: 12.5%; position: absolute;}

Import other js files:

Retrieval.js: calculator addition, subtraction, multiplication and division selector

/ / 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'+': / / call public addition / / eslint-disable-next-line no-undef variables1 = Add.add (variables1 Variables2) break case'-': / / call public subtraction / / eslint-disable-next-line no-undef variables1 = Subtraction.subtraction (variables1, variables2) break / / eslint-disable-next-line no-duplicate-case case'*': / / call common multiplication / / eslint-disable-next-line no-undef variables1 = Multiplication.multiplication (variables1 Variables2) break default: break} return variables1}}

Add.js: addition operation

Export default {add: function (addOne, addTwo) {/ / eslint-disable-next-line no-unused-vars addOne = Number (addOne) + Number (addTwo) / / Show the current value return addOne}}

Multiplication.js: multiplication operation

Export default {multiplication: function (addOne, addTwo) {/ / eslint-disable-next-line no-unused-vars addOne = Number (addOne) * Number (addTwo) / / display the current value return addOne}}

Subtraction.js: subtraction operation

Export default {subtraction: function (addOne, addTwo) {/ / eslint-disable-next-line no-unused-vars addOne = Number (addOne)-Number (addTwo) / / display the current value return addOne}} at this point, the study on "how to implement calculator encapsulation in vue" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.