Vue makes click to switch picture effect

Thoughts

Create an array, put pictures in the array, use props (parent component to pass value to child component), v-for (loop), v-bind (binding attribute) to pass the picture into the div defined by HTML.

Ⅰ. Import the vue file in the head (the import premise is that the vue file has been introduced into js)

<script src="js/vue.js"></script>

Ⅱ. Create a z-div in HTML (you can name it according to your preferences) to receive the passed value of the component, and use v-for to make the array elements traverse the loop to display the picture, v -bind binds im (im is defined in the global component in the script tag), and the variable i is passed into im.

<div id="app">
     <z-div v-for="i in img" :im="i"></z-div>
</div>

Ⅲ. Define a component