<template>
  <h1>v-pre Example</h1>
  <p>Using the v-pre directive to display the actual Vue code of the first paragraph below the image.</p>
  <img v-bind:src="imgUrl[imgIndex]">
  <p v-pre>Img src: '{{ imgUrl[imgIndex] }}' <strong>(Not compiled)</strong></p>
  <p>Img src: '{{ imgUrl[imgIndex] }}' <strong>(Compiled version)</strong></p>
  <button v-on:click="changeImg">Change image</button>
</template>

<script>
export default {
  data() {
    return {
      imgIndex: 0,
      imgUrl: [
        'img_fish.svg',
        'img_tiger.svg',
        'img_turtle.svg'
      ]
    }
  },
  methods: {
    changeImg() {
      this.imgIndex++;
      if (this.imgIndex >= this.imgUrl.length) {
        this.imgIndex = 0;
      }
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')