Java永远的神_ 2020-12-15 14:08 采纳率: 97.7%
浏览 2547
已采纳

前端项目，怎么实现文字逐个出现的效果？

接受了个新项目 有个需求是文字一个个逐个显示出来，网上找的都是些很老的方法，很多也不好直接复制。

我用vue的，有没有什么比较好用的方法？

  • 写回答

4条回答 默认 最新

  • weixin_74836531 2020-12-15 21:47
    关注

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="GBK">
            <title></title>
        </head>
     
        <body>
            <div id="app">
                <button @click="attack">骑兵连进攻</button>
                <button @click="retreat">骑兵连撤退</button>
                <h3>{{content}}</h3>
            </div>
        </body>
        <script src="vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                    timer:null,
                    content:'狼行千里吃肉，狗行千里吃屎，我独立团到哪都是嗷嗷叫的野狼！进攻进攻！！！'
                },
                methods:{
                    attack:function(){
                        var that=this;
                        //清除定时器，防止重复点击
                        clearInterval(that.timer);
                        that.timer=setInterval(function(){
                            //that.content.substr(1) ==> 取到content第1位到结尾的内容（不包含第1位）
                            //that.content.substr(0,1) ==> 取到content的第1位
                            //将以上2个内容想连接赋值给 Content
                            that.content =that.content.substr(1) + that.content.substr(0,1);
                        },400);
                        //也可以改成箭头函数，这样就无需把this赋值改成that
                        /*this.timer=setInterval(()=>{
                            this.content =this.content.substr(1) + this.content.substr(0,1);
                        },600);*/
                        
                        
                    },
                    retreat:function(){
                        clearInterval(this.timer);//停止定时器
                    }
                }
            });
            
        </script>
    </html>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵