1、this
一个vue实例中,如果要调用当前实例中的data里面的数据或者变量,要用this
进行指向,this
即代表当前实例
2、走马灯小案例
2.1 定义两个按钮以及一个p标签显示文字
<div id="app">
<input type="button" value="浪起来" @click="lang" />
<input type="button" value="低调" @click="stop" />
<p style="border: 1px solid blue; width: 150px;">{{msg}}</p> <!-- 这是走马灯显示的信息 -->
</div>
2.2 data里定义显示的文字
msg:'猥 琐 发 育,别 浪 !',
2.3 lang方法里定义一个计时器
2.3.1 首先,先在data里设置定时器一开始为空
xunhuan:null
2.3.2然后lang方法每次执行前先清除排在前面的定时器
clearInterval(this.xunhuan)
2.3.3然后定义一个计时器 注意要用this
把定时器赋给xunhuan
这个变量
this.xunhuan = setInterval(()=>{
//定义一个变量存放字符串第一个字符
var start = this.msg.substring(0,1); //第0个开始,截取一位
//定义一个变量存放字符串第二个字符串及后面的字符
var end = this.msg.substring(1); //第一位开始,截取后面所有字符
//重新赋给msg
this.msg=end+start;
console.log(this.msg);
},160)
2.3.4最后定义stop方法停止计时器
//停止定时器
stop(){
clearInterval(this.xunhuan) //里面不用带引号
}
3、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走马灯</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 原理:利用substring()方法把字符串第一个字符移到最后一位 -->
<div id="app">
<input type="button" value="浪起来" @click="lang" />
<input type="button" value="低调" @click="stop" />
<p style="border: 1px solid blue; width: 150px;">{{msg}}</p> <!-- 这是走马灯显示的信息 -->
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'猥 琐 发 育,别 浪 !',
// 因为在方法里定义的定时器在方法外不能调用,所以把定时器的名称放在data里方便调用
xunhuan:null
},
methods:{
//开始走马灯效果
lang(){
//每次开始前先清除上一次的定时器效果
clearInterval(this.xunhuan)
//第二种解决this指向问题 ,就是用箭头函数
this.xunhuan = setInterval(()=>{
//定义一个变量存放字符串第一个字符
var start = this.msg.substring(0,1); //第0个开始,截取一位
//定义一个变量存放字符串第二个字符串及后面的字符
var end = this.msg.substring(1); //第一位开始,截取后面所有字符
//重新赋给msg
this.msg=end+start;
console.log(this.msg);
},160)
},
//停止定时器
stop(){
clearInterval(this.xunhuan) //里面不用带引号
}
}
})
</script>
</html>