Vue实现跑马灯

Vue实现滚动字条/跑马灯

内容不多,直接看代码吧

 
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
       <script src="../../资料/js/vue.js">script>   
    head>
    <style>
        *{
            text-align: center;
        }
    style>
<body>
<div id="app">
    <h1>{{txt}}h1>
    <button @click="run">开始button>
    <button @click="stop">停止button>
div>

body>
html>

<script>
    new Vue({
        el:'#app',
        data:{
            txt:"吾疑君驭车而飚之,然苦于无证以示众。",
            timer:null
        },
        methods:{
            run(){
                if(this.timer != null){
                    return;
                }
                this.timer = setInterval(()=>{
                       let start = this.txt.substring(0,1);//截取下标为0的字符串
                       let end = this.txt.substring(1);//截取从下标为1到结束的字符串
                       this.txt = end + start;
                },300);
            },
            stop(){
                clearInterval(this.timer)
            }
        }
    })
script>

效果如下图:
Vue实现跑马灯_第1张图片

你可能感兴趣的:(Vue,web,js)