vue.js(4)--字符串跑马灯

2019-08-14 10:34:35来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

制作一个字符串的跑马灯效果

(1)实例代码

<!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 class="app">
        <h1 v-text='msg'></h1>
        <input type="button" value="走你" @click="go">
        <input type="button" value="停" @click="stop">
    </div>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                msg:'习得前端妙,抱得美人归!',
                timer:null
            },
            methods:{
                go() {
                    // clearInterval(timer);
                    if(this.timer != null){
                        return;
                        } //使用if判断定时器状态,解决重复开启定时器的bug。
                    this.timer=setInterval(() => {  //箭头函数解决this指向问题,箭头函数内部的this相对于外部this的指向。
                    // console.log(this.msg)需要访问data中数据时,一定要使用this,比如this.msg
                    var firstStr=this.msg.substring(0,1);
                    var lastStr=this.msg.substring(1);//截取函数的使用
                    this.msg=lastStr+firstStr;
                },400)
            },
                stop(){
                    clearInterval(this.timer);
                    this.timer=null;
                }
            }
        })
    </script>
</body>
</html>

 

(2)摘要

  实现案例的基本思路是利用substring截取字符串再进行拼接,然后使用定时器来达到动态的效果。

  箭头函数可以解决this的指向问题,箭头函数内部的this相对于外部this的指向。

  需要访问data中数据时,一定要使用this访问,比如this.msg  this.timer。

  注意substring()函数的使用,substring(0,1)表示从0开始截取1位字符,substring(1)表示从1开始截取到最后。

  案例中会出现重复开启定时器的bug,通过定义timer=null,然后判断其状态来解决bug,最后在清除定时器后需要重新赋值timer=null。

  


原文链接:https://www.cnblogs.com/qiqisusu/p/11340900.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HBuilderX使用Vant组件库

下一篇:jQuery遍历(2)