标签：箭头函数 log meta rip html creat jquery ted 语句
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<!--视图-->
<img :src="images[currentIndex].imgSrc" alt="" @click="imgHandler">
<br>
<button @click="prevHandler">上一张</button>
<button @click="nextHandler">下一张</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src='./vue.js'></script>
<script>
let vm = new Vue({ // 声明变量 实例化一个对象vm(指的是vue的实例)
el:"#app", //绑定根元素
data(){
return{
images:[ //数据
{id:1,imgSrc:"img/1.jpg"},
{id:2,imgSrc:"img/2.jpg"},
{id:3,imgSrc:"img/3.jpg"},
// {id:4,imgSrc:"img/4.jpg"},
],
currentIndex:0 //一开始设置为 0
}
},
methods:{// 对象内容是js函数
nextHandler(e){
console.log(e);
this.currentIndex++;
//更改图片地址
if (this.currentIndex == 3){ //js的if判断语句
this.currentIndex = 0;
}
},
prevHandler(e) {
console.log(e);
this.currentIndex--;
//更改图片地址
if (this.currentIndex == 0) { //js的if判断语句
this.currentIndex = 3;
}
},
imgHandler(e){ //每一个事件都有一个event对象, 冒泡阻止默认事件学的
console.log(e.target);//当前目标对象 <img src="img/1.jpg" alt>
console.log(this); //实例化里面的对象this 指的都是当前实例化对象
}
},
//create() 组件创建完成, 组件创建完成立马往后台发ajax
// ajax vue的钩子函数
// created(){
// // console.log(this); //就是当前的vm
// setInterval(function(){
// console.log(this);//this是window对象 但是想把this的指向改成vm 所以把匿名函数改成箭头函数
// },1000)
// }
created(){
// this的指向问题 ************* 能用箭头函数不用匿名函数
//匿名函数改成箭头函数 this代指vue
setInterval( ()=>{
console.log(this);//this是 vue 对象
},1000)//自动循环播放图片 1秒播放一次
}
})
</script>
</body>
</html>标签：箭头函数 log meta rip html creat jquery ted 语句
原文地址：https://www.cnblogs.com/bigox/p/11630001.html
