VueJs Computed Properties

owthub · web-flow · commit 177ae8afc561 · 2018-07-26T08:39:02.000+05:30
diff --git a/video-11.html b/video-11.html
@@ -0,0 +1,36 @@
+<html>
+   <head>
+       <script src="vue.js"></script>
+   </head>
+
+   <body>
+
+      <div id="my-app">
+
+    <input type="text" v-model="maths" placeholder="Maths marks">
+    <input type="text" v-model="science" placeholder="Science marks">
+    <input type="text" v-model="english" placeholder="English marks">
+
+    <h3>Total Marks: {{ totalSubjectMarks }}</h3>
+
+
+          {{ runme() }}
+
+<br/><br/>
+
+<input type="text" v-model="meter" placeholder="Enter length in meter">
+
+ <h4>Length in cm : {{ convertToCentimeter }}</h4>
+
+          <br/>
+          <br/>
+          <input type="text" placeholder="Enter First Name" v-model="firstname">
+          <input type="text" placeholder="Enter Last Name" v-model="lastname">
+
+          <h4>Full name: {{ getFullName }}</h4>
+
+      </div>
+
+      <script src="video-11.js"></script>
+   </body>
+</html>
diff --git a/video-11.js b/video-11.js
@@ -0,0 +1,28 @@
+var myapp = new Vue({
+  el:"#my-app",
+  data:{
+     firstname: "",
+     lastname: "",
+     meter:"",
+     maths:0,
+     science: 0,
+     english: 0
+  },
+  methods:{
+     runme: function(){
+       console.log("This is first method");
+       return "I am method"
+     }
+  },
+  computed:{
+    getFullName: function(){
+        return this.firstname+" "+this.lastname;
+    },
+    convertToCentimeter: function(){
+        return this.meter*100;// 1m = 100cm
+    },
+    totalSubjectMarks: function(){
+        return parseInt(this.maths) + parseInt(this.english) + parseInt(this.science);
+    }
+  }
+});
