Step 3: v-if, v-else, v-else-if, v-show.

assets/css/style.css

@@ -3,7 +3,7 @@
     color:#282828;
     margin: 0px;
   }
-  
+
   .nav-bar {
     background: linear-gradient(-90deg, #84CF6A, #16C0B0);
     height: 60px;
@@ -22,30 +22,30 @@
     margin: 40px;
     box-shadow: 0px .5px 1px #d8d8d8;
   }
-  
+
   .product-image {
     width: 80%;
   }
-  
+
   .product-image,
   .product-info {
     margin-top: 10px;
     width: 50%;
   }
-  
+
   .color-box {
     width: 40px;
     height: 40px;
     margin-top: 5px;
   }
-  
+
   .cart {
     margin-right: 25px;
     float: right;
     border: 1px solid #d8d8d8;
     padding: 5px 20px;
   }
-  
+
   button {
     margin-top: 30px;
     border: none;
@@ -54,25 +54,25 @@
     height: 40px;
     width: 100px;
     font-size: 14px;
-  } 
-  
+  }
+
   .disabledButton {
     background-color: #d8d8d8;
   }
-  
+
   .review-form {
     width: 400px;
     padding: 20px;
     margin: 40px;
     border: 1px solid #d8d8d8;
   }
-  
+
   input {
-    width: 100%;  
+    width: 100%;
     height: 25px;
     margin-bottom: 20px;
   }
-  
+
   textarea {
     width: 100%;
     height: 60px;
@@ -86,4 +86,8 @@
   .activeTab {
     color: #16C0B0;
     text-decoration: underline;
-  }
+  }
+
+  [v-cloak] {
+    display: none
+  }

index.html

@@ -20,7 +20,11 @@
         </a>
       </div>
       <div class="product-info">
-        <h1>{{ product }}</h1>
+        <h1 v-cloak>{{ product }}</h1>
+        <p v-cloak v-show="inventory > 10">In stock</p>
+        <p v-cloak v-show="inventory <= 10 && inventory > 0">Limited stock</p>
+        <p v-cloak v-show="inventory <= 0">Out of stock</p>
+        <p v-if="onSale">On sale! Act fast.</p>
       </div>
     </div>
   </div>

main.js

@@ -3,7 +3,10 @@ const app = new Vue({
     data: {
         description: "Chaussettes montantes",
         image: "./assets/img/vmSocks-green-onWhite.jpg",
+        inventory: 90,
         link: "https://www.google.com/search?q=vuejs+socks",
+        onSale: false,
         product: "Socks",
     }
 });
+