<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跑马灯</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 创建一个要控制的区域 -->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
//在 VM 实例中,如果想获取data上的数据,或者想要调用 methods 中的方法,
//必须通过 this.数据属性名 或 this.方法名 来进行访问 ,这里的this ,就表示我们 new 出来的VM 实例对象
var vm = new Vue({
el: '#app',
data: {
msg: '跑马灯测试1,2,3,4,5,6 ',
intervalId: null //在data上定义 定时器Id
},
methods: {
lang(){
if(this.intervalId != null) return;
this.intervalId = setInterval( () => {
console.log(this.msg);
// 获取到头的第一个字符
var start = this.msg.substring(0,1);
//获取到 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到 新的字符串 ,并赋值给 this.msg
this.msg = end + start;
},400 )
},
stop(){ //停止定时器
clearInterval(this.intervalId)
//每当清除了定时器之后,需要把intervalId 重置为null
this.intervalId = null;
}
}
})
//VM 实例,会监听自己身上data 中所有数据的改变,只要数据一发生变化,就会自动把 最新的数据,从data上同步到页面中去;
//好处:程序员只需要关心数据,不需要考虑如何重新渲染DOM
</script>
</body>
</html>