Lesson 4

Author: gabcdev

index.html

@@ -15,10 +15,14 @@
       <div class="product-display">
         <div class="product-container">
           <div class="product-image">
-            <img v-bind:src="image">
+            <img :src="image">
           </div>
           <div class="product-info">
             <h1>{{ product }}</h1>
+            <p v-if="inventory > 10">In stock</p>
+            <p v-else-if="inventory <= 10 && inventory > 0">Almost sold out</p>
+            <p v-else>Out of stock</p>
+            <p v-show="onSale">Sale</p>
           </div>
         </div>
       </div>

main.js

@@ -2,7 +2,9 @@ const app = Vue.createApp({
     data() {
         return {
             product: 'Socks',
-            image: './assets/images/socks_blue.jpg'
+            image: './assets/images/socks_blue.jpg',
+            inventory: 0,
+            onSale: false
         }
     }
 })