lovecoding
/
VIP29


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <!-- 引入文件   -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>显示图片</h3>

        <button @click="leftButton" >《《《</button>
        <!-- v-bind绑定 -->
        <!-- : 简写方式       -->
        <!--<img v-bind:src="imgsrc" width="200px" height="200px" >-->
        <img :src="imgsrc" width="200px" height="200px" >

        <button @click="rightButton" >》》》</button>

    </div> <!-- 容器 -->
</body>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let imgsrc = ref("imgs/1.jpg")

            let index = 0

            //声明数组
            let imgs = [
                "imgs/1.jpg",
                "imgs/2.jpg",
                "imgs/3.jpg",
            ]

            function leftButton() {
                index--;
                //取绝对值
                imgsrc.value = imgs[Math.abs(index)%3];
            }

            function rightButton() {
                index++;
                imgsrc.value = imgs[Math.abs(index)%3];
            }
            return {
                rightButton, leftButton, imgsrc
            };
        }
    }).mount('#app'); //createApp创建对象 挂在到app
</script>
</html>