<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习 属性绑定v-bind:...</title>
</head>
<body>
    <div id = "app">
        <!-- 插值表达式 -->
        <img :src="src" @click = nextimg>              <!-- v-bind绑定src属性   @绑定点击方法  负责手动控制图片轮转 -->
    </div>

    <script src = "js/vue.js"></script>
    <script>
        let i =0;                                       // 1.定义变量i  控制图片轮转
        // 1.创建一个vue实例
         const app = new Vue({
            // el用来给Vue实例一个作用域
            el:"#app",
             data:{
                //给Vue定义一些相关的数据  定义键和值
                 src:"image/3.jpg",
             },

             methods:{
                nextimg(){                              // 2.手动轮播 使用i判定 轮转到第几张
                    i++;
                    if(i%4==0){
                        this.src = "image/3.jpg";
                    }else if(i%4==1){
                        this.src = "image/4.jpg";
                    }else if(i%4==2){
                        this.src = "image/5.jpg";
                    }else if(i%4==3){
                        this.src = "image/6.jpg";
                    }
                },
             },
         });
         window.onload = function () {                            //3.网页加载完毕绑定方法 使用setInterval 方法自动轮播
             setInterval(f1,2000);
         }
         function f1(){                                         // 4.该方法负责判断自动轮转到第几张图片
             i++;
             let imgs = document.getElementsByTagName("IMG");       //5.获取 img类型查找 也可以直接使用id
             if(i%4==0){
                 imgs[0].src = "image/3.jpg";                   //imgs[0] 绑定图片

             }else if(i%4==1){
                 imgs[0].src = "image/4.jpg";

             }else if(i%4==2){
                 imgs[0].src = "image/5.jpg";

             }else if(i%4==3){
                 imgs[0].src = "image/6.jpg";
             }
         }
    </script>

</body>
</html>