added lesson 9 code

Shaun Pelling · Shaun Pelling · commit de9f0cd0645f · 2017-03-27T17:35:53.000+01:00
diff --git a/app.js b/app.js
@@ -1,15 +1,28 @@
 new Vue({
     el: '#vue-app',
     data: {
-        name: '',
-        age: ''
+        a: 0,
+        b: 0,
+        age: 20
     },
     methods: {
-        logName: function(){
-            console.log('you entered your name');
+        /*addToA: function(){
+            console.log('addToA');
+            return this.a + this.age;
         },
-        logAge: function(){
-            console.log('you entered your age');
+        addToB: function(){
+            console.log('addToB');
+            return this.b + this.age;
+        }*/
+    },
+    computed: {
+        addToA: function(){
+            console.log('addToA');
+            return this.a + this.age;
+        },
+        addToB: function(){
+            console.log('addToB');
+            return this.b + this.age;
         }
     }
 });
diff --git a/index.html b/index.html
@@ -8,13 +8,13 @@
     </head>
     <body>
         <div id="vue-app">
-            <h1>Keyboard Events</h1>
-            <label>Name:</label>
-            <input type="text" v-on:keyup.enter="logName" v-model="name" />
-            <span>{{ name }}</span>
-            <label>Age:</label>
-            <input type="text" v-on:keyup.alt.enter="logAge" v-model="age" />
-            <span>{{ age }}</span>
+            <h1>Computed Properties</h1>
+            <button v-on:click="a++">Add to A</button>
+            <button v-on:click="b++">Add to B</button>
+            <p>A - {{ a }}</p>
+            <p>B - {{ b }}</p>
+            <p>Age + A = {{ addToA }}</p>
+            <p>Age + B = {{ addToB }}</p>
         </div>
     </body>
 
