added lesson 10 code

Shaun Pelling · Shaun Pelling · commit 96bf55837edf · 2017-03-27T18:00:13.000+01:00
diff --git a/app.js b/app.js
@@ -1,28 +1,18 @@
 new Vue({
     el: '#vue-app',
     data: {
-        a: 0,
-        b: 0,
-        age: 20
+        available: false,
+        nearby: false
     },
     methods: {
-        /*addToA: function(){
-            console.log('addToA');
-            return this.a + this.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;
+        compClasses: function(){
+            return{
+                available: this.available,
+                nearby: this.nearby,
+            }
         }
     }
 });
diff --git a/index.html b/index.html
@@ -8,13 +8,17 @@
     </head>
     <body>
         <div id="vue-app">
-            <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>
+            <h1>Dynamic CSS</h1>
+            <!-- <h2>Example 1</h2>
+            <div v-on:click="available = !available" v-bind:class="{available: available}">
+                <span>Ryu</span>
+            </div> -->
+            <h2>Example 2</h2>
+            <button v-on:click="nearby = !nearby">Toggle nearby</button>
+            <button v-on:click="available = !available">Toggle available</button>
+            <div v-bind:class="compClasses">
+                <span>Ryu</span>
+            </div>
         </div>
     </body>
 
diff --git a/styles.css b/styles.css
@@ -1,4 +1,16 @@
-label{
-    display: block;
-    margin: 20px 0 10px
+span{
+    background: red;
+    display: inline-block;
+    padding: 10px;
+    color: #fff;
+    margin: 10px 0;
+}
+
+.available span{
+    background: green;
+}
+
+.nearby span:after{
+    content: "nearby";
+    margin-left: 10px;
 }
