Kilometer to meter conversion:
Hello everyone, welcome to vue.js tutorial series. In this tutorial, I will discuss the conversion from kilometer to meter and meter to kilometer using Vue Js.
Everyone has known that Vue Js is the JavaScript framework and it is an open-source JavaScript framework. This is progressive for building the user interface. I never tell you it is the best framework but I know it is one of the best JavaScript frameworks. When you read Vue documentation carefully then it will very easy to learn and you can get more amazing of a part to work with Vue.
Here I will show you a small part of Vue related work that is kilometer to meter conversion using Vue v-model. So, let’s start to do it in your Local Host.
At first, create a folder in your local server, create an index.html page and open it in a textEditor. In the HTML page write your HTML 5 code to start HTML tag and set Vue.js link in the header of the page. The link is here:
<script src="https://unpkg.com/vue"></script>
Now copy all the example code, paste it into your HTML page and save it. Now open the index.html page in a web browser and get the result. Enter a value in the input box to get result and change value from the text box and see the change result.
Source Code here:
<!DOCTYPE html> <html> <head> <title>Vue</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://unpkg.com/vue"></script> </head> <body> <div class="container"> <div id="app"> <label>Kilometer:</label> <input type="text" name="" v-model="km"> <label>Meter:</label> <input type="text" name="" v-model="m"> </div> </div> <script> new Vue({ el: '#app', data:{ km:0, m:0, }, watch:{ km: function(val){ this.km=val; this.m=val * 1000; }, m: function(val){ this.m=val; this.km=val / 1000; } } }); </script> </body> </html>
I think it will be very helpful for you to work with Vue JS and I am sure you can do more implement to work with Vue Js. Thank you to visit our page.