s2e23 computed properties

2018-04-13 14:27:33 -04:00 · 2018-04-13 14:27:33 -04:00 · 8ac77e11d5
commit 8ac77e11d5
parent be0ddd00f0
2 changed files with 21 additions and 3 deletions
--- a/app.js
+++ b/app.js
@ -1,6 +1,21 @@
 var app = new Vue({
  el: '#app',
  data: {
-    name: "Tyrel"
+    counter: 0,
+    secondCounter: 0,
  },
+  methods: {
+    result(){
+      console.log("result");
+      return this.counter >= 5 ? ">=5" : "<5"
+    }
+  },
+  computed: {
+    output(){
+      console.log("computed");
+      return this.counter >= 5 ? ">=5" : "<5"
+
+    }
+  }
+
 })
--- a/index.html
+++ b/index.html
@ -6,8 +6,11 @@
  </head>
  <body>
    <div id='app'>
-        <input type="text" v-model="name">
-        <p>{{name}}</p>
+      <button v-on:click="counter++">Increase</button>
+      <button v-on:click="counter--">Decrease</button>
+      <button v-on:click="secondCounter++">Increase 2nd Counter</button>
+      <p>counter: {{counter}} | {{secondCounter}}</p>
+      <p>result: {{result()}} | {{ output }}</p>
    </div>

    <script src="app.js" charset="utf-8"></script>