前端应用_Vue_经典案例用vue实现跑马灯

最新推荐文章于 2024-07-22 09:29:57 发布

上海_彭彭

最新推荐文章于 2024-07-22 09:29:57 发布

阅读量560

点赞数

分类专栏： Vue.js 文章标签： vue 跑马灯

本文链接：https://blog.csdn.net/qq_34979346/article/details/98535620

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

跑马灯就是文字不停的循环显示，显示效果如下：

在这里插入图片描述
思路如下：

创建两个button ，一个显示文字的标签
让标签的文字取自 vue 对象 data 里的msg
写个方法放到vue 对象 methods 里，让第一个字符拼接到后边
button 绑定上边的方法
把上边的方法用 setInterval 方法进行迭代，并把返回值保存在data 里（status）
取到data 里 setInterval 的值，写个关闭方法。
解决不停点击，也生效的问题，
默认status 为null，写个判断当为null 的时候继续，不为null 直接阻断
，如果关闭也设置status 为null

直接上代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp">

    <input type="button" value= "Start" v-on:click="show" >
    <input type="button" value="Close" v-on:click="close">
    <h1>{{msg}}</h1>

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    msg: '开始浪起来，浪一个浪~~',
                    status:null,

                },
                methods:{


                    show: function (){
                    if (this.status  != null){return;}
                     this.status=  setInterval(()=>{

                       var start_string=this.msg.substring(0,1);
                       var end_string=this.msg.substring(1);
                       this.msg=end_string+start_string;
                       console.log(this.msg)

                        },500)

                    },
                    close: function(){

                    clearInterval(this.status);
                    this.status=null


                    }
                }
            }
        )
    </script>

</div>
</body>
</html>

上海_彭彭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_经典案例用vue实现跑马灯

跑马灯就是文字不停的循环显示，显示效果如下：思路如下：创建两个button ，一个显示文字的标签让标签的文字取自 vue 对象 data 里的msg写个方法放到vue 对象 methods 里，让第一个字符拼接到后边button 绑定上边的方法把上边的方法用 setInterval 方法进行迭代，并把返回值保存在data 里（status）取到data 里...
复制链接

扫一扫

专栏目录