基于Vue实现标签的字体滚动-向日葵屋

基于Vue实现标签的字体滚动

实现思路：

通过截取数据第一个字符，把它拼接到最后，通过定时器实现滚动效果，在vue中，当你更新data数据时，网页会自己帮你更新网页中的数据。

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基于Vue实现标签的字体滚动</title>
        <!--导入vue包-->
        <script src="lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
        <!--通过v-on（缩写@）绑定点击事件-->
            <input type="button" name="" id="" value="跑起来" @click="running" />
            <input type="button" name="" id="" value="停一下" @click="stop" />
            <!--通过v-text获取数据-->
            <h1 v-text="msg"></h1>
        </div>
        <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ msg:'我要飞起来啦！奥利给，兄弟们', Intervalid:null,//用于后面清除定时器 }, methods:{ // running(){ // if(this.Intervalid!=null) return; //因为这里的this是指vue实例对象，而Interval里的this是指window，所以var _this=this;这样在Interval使用vue对象 // var _this=this; // _this.Intervalid=setInterval(function(){ //截取第一个字符 // var start=_this.msg.substring(0,1); //截取不是第一个字符 // var stop=_this.msg.substring(1); //重新赋值拼接 // _this.msg=stop+start; // },500) // } running(){ //防止开启多个定时器 if(this.Intervalid!=null) return; //通过使用ES6的()=>来实现Interval定时器的this指向外部的this指针 this.Intervalid=setInterval(()=>{ var start=this.msg.substring(0,1); var stop=this.msg.substring(1); this.msg=stop+start; },500) }, stop(){ //清除定时器 clearInterval(this.Intervalid); this.Intervalid=null; } } }); </script>
    </body>
</html>