跑马灯案例
Posted lujieting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑马灯案例相关的知识，希望对你有一定的参考价值。
<!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</title>
<script src="js/vue-2.4.0.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实例对象
const vm=new Vue({
el:‘#app‘,
data:{
msg:‘猥琐发育，别浪～‘,
intervalId:null //在data上定义 定时器Id
},
methods:{
lang(){
//console.log(this.msg);
if(this.intervalId!=null) return;
//const _this=this;
this.intervalId=setInterval( ()=> { //=> 箭头外部的指示永远和内部相同 this
//获取到头的第一个字符
var start=this.msg.substring(0,1)
//获取到后面的所有字符
var end=this.msg.substring(1)
//重新拼接得到新的字符串，并赋值给this.msg
this.msg=end+start
},400);
//注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，
//从data上同步到页面中去;[好处：程序员只需关心数据，不需要考虑如何重新渲染DOM页面]
},
stop(){ //停止计时器
clearInterval(this.intervalId)
//每当清理定时器之后，需要重新把this.intervalId设置为null
this.intervalId=null;
},
}
})
</script>
</body>
</html>
以上是关于跑马灯案例的主要内容，如果未能解决你的问题，请参考以下文章