<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')