欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vue.js（4）--字符串跑马灯

程序员文章站 2022-04-29 20:58:08
制作一个字符串的跑马灯效果 （1）实例代码 （2）摘要 实现案例的基本思路是利用substring截取字符串再进行拼接，然后使用定时器来达到动态的效果。 箭头函数可以解决this的指向问题，箭头函数内部的this相对于外部this的指向。 需要访问data中数据时，一定要使用this访问，比如thi ......

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

（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。

　　

上一篇： 家常炖鸡怎么做更鲜美

下一篇： Freemarker入门（二）

推荐阅读