<!DOCTYPE html>
<html>
<head>
<title>My first Vue page</title>
<style>
#app > div {
border: solid black 1px;
width: 80%;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img {
width: 70px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Example 'v-for' to create images</h1>
<p>The 'v-for' directive is used to create images based on the 'manyFoods' array in the Vue instance.</p>
<div id="app">
<div>
<img v-for="x in manyFoods" v-bind:src="x">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
manyFoods: [
'img_burrito.svg',
'img_salad.svg',
'img_cake.svg',
'img_soup.svg',
'img_fish.svg',
'img_pizza.svg',
'img_rice.svg'