How to realize simple Web Calculator with Vue
This article mainly introduces "how to achieve a simple web calculator in Vue". In daily operation, I believe many people have doubts about how to achieve a simple web calculator in Vue. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubts of "how to achieve a simple web calculator in Vue". Next, please follow the editor to study!
Case description
1. Check the knowledge points
2. Create vue instances and use v-model built-in instructions
3. Practice goal
Create an instance of vue.
Master the use of v-model built-in instructions.
4. Demand analysis
The user obtains the calculation result by selecting the calculation method and data input.
5. Case analysis.
The effect is shown in the figure:
Calculator .result {font-size: 30px } addition, subtraction, multiplication and division data 1: data 2: Result: {{result}} var vm = new Vue ({el:'# app' / / define the initial data data: {fuhao: '1percent, num1:', num2:', result:''} / / define the event handling function Calc methods: {calc () {if (! this.num1 | |! this.num2) {this.result = 'the number entered cannot be empty'} else {if (this.fuhao = = 1) {this.result = ParseInt (this.num1) + parseInt (this.num2)} if (this.fuhao = = 2) {this.result = parseInt (this.num1)-parseInt (this.num2)} if (this.fuhao = = 3) {this.result = parseInt (this.num1) * parseInt (this.num2 )} if (this.fuhao = = 4) {this.result = parseInt (this.num1) / parseInt (this.num2)}) so far The study on "how to implement a simple web calculator in Vue" is over. I hope to be able to solve your 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!
