ScoobyAndShaggyBasic

by Adam McQuistan

HTML

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <h3>Cartoon characters</h3>
    <div v-for="(character, i) in characters" v-bind:key="i" class="character">
      <h4>{{ character.name }}</h4>
      <p><img v-bind:src="character.imgSrc" v-bind:alt="character.name"/></p>
    </div>
   </div>
</div>

CSS

img {
  width: 100px;
  height: 120px;
}

.character {
  display: inline-block;
  width: 40%;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	characters: [
    	{
      	name: 'Scooby',
        imgSrc: 'https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png'
      }, {
      	name: 'Shaggy',
        imgSrc: 'https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png'
      }
    ]
  }
})