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
Git is integrated in vscode, and many operations ...
Recorded the installation tutorial of mysql 5.7.1...
Table of contents Problems with resource manageme...
background: 1. There is a notification table in t...
Table of contents 1 Java environment configuratio...
Table of contents Preface 1. Use for...of to iter...
First, understand the updatexml() function UPDATE...
Preface In actual business, paging is a common bu...
background When I was using Docker these two days...
mysql batch delete large amounts of data Assume t...
Install the unzipped version of MySql database un...
Environment configuration 1: Install MySQL and ad...
The equal-width layout described in this article ...
Three useful codes to help visitors remember your...
JavaScript scripts can be embedded anywhere in HT...