Add vue.js computer property

sicktastic · Sep 15, 2017 · 9bb3151 · 9bb3151
1 parent 7fe3265
commit 9bb3151
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 12 deletions.
diff --git a/vuejs/computed_properties_second_example.html b/vuejs/computed_properties_second_example.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Listening to Events</title>
+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+  </head>
+
+  <body>
+
+    <div class="container" style="margin-top: 100px;">
+      <div class="col-4 offset-4">
+        <div id="app">
+          <div class="card">
+            <div class="card-block">
+              <button v-on:click="counter++" class="btn btn-block btn-success">Increase</button>
+              <button v-on:click="counter--" class="btn btn-block btn-danger">Decrease</button>
+              <button v-on:click="secondCounter++" class="btn btn-block btn-default">Second Counter</button>
+              <br />
+              <br />
+              <p>{{ counter }} || {{ secondCounter }}</p>
+              <p>{{ result() }} || {{ output }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script charset="utf-8">
+      new Vue({
+        el: '#app',
+        data: {
+          counter: 0,
+          secondCounter: 0
+        },
+        computed: {
+          output: function() {
+            console.log("Computed");
+            return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
+          }
+        },
+        methods: {
+          result: function() {
+            console.log("Method");
+            return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
+          }
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/vuejs/listening_to_keyboard_event.html b/vuejs/listening_to_keyboard_event.html
@@ -20,18 +20,18 @@
       </div>
     </div>
 
-  <script>
-    new Vue({
-      el: '#app',
-      data: {
-        counter: 0
-      },
-      methods: {
-        alertMe: function() {
-          alert("Hello, there");
+    <script>
+      new Vue({
+        el: '#app',
+        data: {
+          counter: 0
+        },
+        methods: {
+          alertMe: function() {
+            alert("Hello, there");
+          }
         }
-      }
-    });
-  </script>
+      });
+    </script>
   </body>
 </html>