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

L5

Browse Source
This commit is contained in:
bwbl 2026-01-13 14:23:10 +01:00
parent d0691a96df
commit a5ea40c452
2 changed files with 59 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -1,37 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Vue Mastery</title> <title>Vue Mastery</title>
<!-- Import Styles --> <!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" /> <link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js --> <!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="nav-bar"></div> <div class="nav-bar"></div>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
</div>
</div>
</div>
</div>
<!-- Import App --> <div class="product-display">
<script src="./main.js"></script> <div class="product-container">
<div class="product-image">
<img v-bind:src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<label for="variants">Variants</label>
<div
id="variants"
v-for="variant in variants"
:key="variant.id"
>
{{ variant.color }}
</div>
<label for="Size">Size</label>
<div id="Size" v-for="size in sizes">{{ size }}</div>
</div>
</div>
</div>
</div>
<!-- Mount App --> <!-- Import App -->
<script> <script src="./main.js"></script>
const mountedApp = app.mount('#app')
</script> <!-- Mount App -->
</body> <script>
const mountedApp = app.mount("#app");
</script>
</body>
</html> </html>

23
main.js
View File

@ -1,10 +1,15 @@
const app = Vue.createApp({ const app = Vue.createApp({
data() { data() {
return { return {
product: 'Socks', product: "Socks",
image: './assets/images/socks_blue.jpg', image: "./assets/images/socks_blue.jpg",
inStock: true, inStock: true,
details: ['50% cotton', '30% wool', '20% polyester'] details: ["50% cotton", "30% wool", "20% polyester"],
} variants: [
} { id: 2234, color: "green" },
}) { id: 2235, color: "blue" },
],
sizes: ["S", "M", "L", "XL"],
};
},
});