b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

L6

Browse Source
This commit is contained in:
bwbl 2026-01-13 14:29:24 +01:00
parent f91df3ac12
commit bb65d2a275
1 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -17,7 +17,7 @@
<div class="product-display"> <div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<img v-bind:src="image"> <img v-bind:src="image" />
</div> </div>
<div class="product-info"> <div class="product-info">
<h1>{{ product }}</h1> <h1>{{ product }}</h1>
@ -26,8 +26,20 @@
<ul> <ul>
<li v-for="detail in details">{{ detail }}</li> <li v-for="detail in details">{{ detail }}</li>
</ul> </ul>
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div> <div
<button class="button">Add to Cart</button> @mouseover="this.image = variant.image"
v-for="variant in variants"
:key="variant.id"
>
{{ variant.color }}
</div>
<button class="button" @click="cart++">
Add to Cart
</button>
<button class="button" @click="cart--" v-if="cart > 0">
Remove item
</button>
</div> </div>
</div> </div>
</div> </div>
@ -38,7 +50,7 @@
<!-- Mount App --> <!-- Mount App -->
<script> <script>
const mountedApp = app.mount('#app') const mountedApp = app.mount("#app");
</script> </script>
</body> </body>
</html> </html>