目录
【要实现的效果】
点击“开始”按钮，开始走马灯；点击“停”按钮，走马灯停止
【步骤分析】
1、给开始按钮绑定一个事件
2、在按钮的事件处理函数中：拿到msg字符串，然后调用字符串的substring进行截取。第一个字符取出追加到最后的位置
3、为实现走马灯的动态效果，把步骤2的代码放到定时器中，按下按钮后可以自行走马灯
【代码实现】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="start" />
<input type="button" value="停" @click="stop"/>
<h4>{{ msg }}</h4>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//注意:在VM实例中，想要获取data上的数据，或想调用methods中的方法，需要用 this.数据属性名 或 this.方法名 来访问。表示我们new出来的实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'MOOOO走马灯示例。。。',
intervalId:null //在data上定义 定时器Id
},
methods:{
start(){ //这里是function的简写
if(this.intervalId != null) return;
this.intervalId = setInterval(()=>{ //写成箭头函数。注意，=>这两个符号之间不能有空格
// 获取开始的第一个字符
var begin = this.msg.substring(0,1)
// 获取第二个字符及其后所有字符
var end = this.msg.substring(1)
//重新拼接字符串
this.msg = end + begin
},400)
},
stop(){
//停止定时器
clearInterval(this.intervalId)
//每当清除了定时器之后，需要重新把intervalId置为null
this.intervalId = null;
}
}
})
</script>
</body>
</html>
【注意】
关于this指向问题，有两种解决方法：
（1）一个比较投机取巧的方法
（2）使用箭头函数
