This article example shares the specific code of Vue to implement a simple calculator for your reference. The specific content is as follows Case RequirementsCase ideas 1. Binding of values A and B is realized through v-model directive Implementing static pages <div id='app'> <h1>Simple Calculator</h1> <div><span>Value A:</span><span><input type="text" v-model='a'></span></div> <div><span>Value B:</span><span type="text" v-model='b'></span></div> <div><button>Calculate</button></div> <div><span>Calculation results</span><span></span></div> </div> Importing Vue <script type="text/javascript" src="js/vue.js"></script> Add instructions for static pages <div id='app'> <h1>Simple Calculator</h1> <div><span>Value A:</span> <span> <input type="text" v-model='a'> </span> </div> <div> <span>Value B:</span> <span> <input type="text" v-model='b'> </span> </div> <div> <button v-on:click="handle">Calculate</button> </div> <div><span>Calculation result</span><span v-text="result"></span></div> </div> Set calculation function <script type="text/javascript"> /* */ var vm = new Vue({ el: "#app", data: { a: '', b: '', result: '' }, methods: { handle: function () { // Implement calculation logic this.result = parseInt(this.a) + parseInt(this.b); } } }); </script> Final code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator</title> </head> <body> <div id='app'> <h1>Simple Calculator</h1> <div><span>Value A:</span> <span> <input type="text" v-model='a'> </span> </div> <div> <span>Value B:</span> <span> <input type="text" v-model='b'> </span> </div> <div> <button v-on:click="handle">Calculate</button> </div> <div><span>Calculation result</span><span v-text="result"></span></div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* */ var vm = new Vue({ el: "#app", data: { a: '', b: '', result: '' }, methods: { handle: function () { // Implement calculation logic this.result = parseInt(this.a) + parseInt(this.b); } } }); </script> </body> </html> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: SQL GROUP BY detailed explanation and simple example
>>: Detailed explanation of Linux file operation knowledge points
Unable to load dynamic library under Linux When t...
Table of contents Overview Code Implementation Su...
1. Download the software 1. Go to the MySQL offic...
When configuring web.xml for tomcat, servlet is a...
6 solutions for network failure in Docker contain...
A WeakMap object is a collection of key/value pai...
Table of contents Code: Replenish: Summarize Requ...
1. Postgres database backup in Docker Order: dock...
Table of contents Overview Why choose a framework...
Nowadays, whether you are on the sofa at home or ...
Today, I set up a newly purchased Alibaba Cloud E...
Related knowledge points Passing values from pa...
Table of contents 1. Initialization structure 2. ...
When Docker starts a container, it specifies the ...
Colleagues often ask, when deleting files/directo...