Vue realizes simple effect of running light

This article shares the specific code of Vue to achieve a simple effect of a marquee for your reference. The specific content is as follows

1. Marquee effect

Description: Click the "Support" button to make the text float to the left, then click the "Pause" button to stop the current floating

2. Complete code (Note: the vue.js file needs to be introduced in the code. This file is introduced according to the directory location. The specific location is commented in the code)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Marquee</title>
    <!-- Import vue.js file-->
    <script src="../vue.js"></script>
 <style type="text/css">
  #app{
   padding: 20px;
  }
 </style>
</head>
<body>
<div id="app">
    <button @click="run">Support</button>
    <button @click="stop">Pause</button>
 <h3>{{msg}}</h3>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"Friends, friends, I love you, just like mice love rice~~~!",
            timer:null //Define the timer on data, the default value is null
        },
        methods:{
            run(){
    // If timer has been assigned, return if(this.timer){return};
                this.timer = setInterval(() => {
     // msg is split into arrays var arr = this.msg.split('');
     // shift deletes and returns the deleted one, push adds to the end // put the first element of the array at the end arr.push(arr.shift());
     // arr.join('') connects the array into a string and copies it to msg
     this.msg = arr.join('');
                },100)
            },
            stop(){
                //Clear timer clearInterval(this.timer);
                //After clearing the timer, you need to set the timer to null again
                this.timer = null;
            }
        }
    })
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: