<!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>