s3e34 conditions with if

2018-04-13 22:50:29 -04:00 · 2018-04-13 22:50:29 -04:00 · c5776f88d5
commit c5776f88d5
parent 8d5c1a2edf
2 changed files with 6 additions and 16 deletions
--- a/app.js
+++ b/app.js
@ -1,15 +1,6 @@
 var app = new Vue({
  el: '#app',
  data: {
-    color: "gray",
-    width: 100
-  },
-  computed:{
-    myStyle(){
-      return {
-        backgroundColor: this.color,
-        width: this.width + "px"
-      }
-    }
+    show: true
  }
 });
--- a/index.html
+++ b/index.html
@ -7,12 +7,11 @@
  </head>
  <body>
    <div id='app'>
-      <div class="demo" :style="{backgroundColor: color}"></div>
-      <div class="demo" :style="myStyle"></div>
-      <div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
-      <hr>
-      <input type="text"  v-model="color">
-      <input type="text"  v-model="width">
+      <button type="button" name="button" @click="show = !show">Switch</button>
+
+      <p v-if="show">You can see me</p>
+      <p v-else>Now you see me</p>
+      <p>Do you also see me?</p>
    </div>
    <script src="app.js" charset="utf-8"></script>
  </body>