<div id="box">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h1>{{msg}}</h1>
</div>
<script src="js/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: '走位,走位,今晚不睡',
intervalId: null //在多个函数中都需要的调用的变量可以放在data中,方便获取
},
methods: {
lang() { //函数简写
if (this.intervalId != null) { //设置阀门,以防重复调用定时器
return;
}
this.intervalId = setInterval(() => { //()=>{}让定时器中的this指向外面的this
var start = this.msg.substring(0, 1); //获取第一个字符
var end = this.msg.substring(1); //获取第一个之后的所有字符
this.msg = end + start; //赋值新字符
}, 400);
},
stop() { //函数简写
clearInterval(this.intervalId); //清除定时器
this.intervalId = null; //清除定时器后打开阀门
}
}
});
</script>
跑马灯案例
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 因为业务需求,需要设置文字的跑马灯效果,查阅相关资料后发现资料比较散乱,现整理如下: 1.单跑马灯效果(系统自带T...
- 文字跑马灯效果这个功能挺常见的,网上也有很多的介绍,大多是说使用普通的TextView加上几条属性即可实现。不过我...
- 本文出自简书:eagle006,如需转载请标明出处,尊重原创谢谢 博客地址:http://www.jianshu....