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:
|
<<: Each time Docker starts a container, the IP and hosts specified operations
>>: MySQL online DDL tool gh-ost principle analysis
Recommend
How to set up vscode remote connection to server docker container
Table of contents Pull the image Run the image (g...
Detailed explanation of encoding issues during MySQL command line operations
1. Check the MySQL database encoding mysql -u use...
Linux uses NetworkManager to randomly generate your MAC address
Nowadays, whether you are on the sofa at home or ...
Detailed explanation of MySQL high availability architecture
Table of contents introduction MySQL High Availab...
An experienced person will show you how to develop a professional and standardized MySQL startup script
Every qualified Linux operation and maintenance p...
JavaScript to achieve Taobao product image switching effect
JavaScript clothing album switching effect (simil...
How to implement parent-child component communication with Vue
Table of contents 1. Relationship between parent ...
Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)
Pre-installation preparation The main purpose of ...
Docker custom network container interconnection
Table of contents Preface –link Custom Network As...
Several specific methods of Mysql space cleaning
Table of contents Preface 1. Check the file disk ...
Summary of various ways to create objects in js and their advantages and disadvantages
Table of contents Early creation method Factory P...
MySQL in Windows net start mysql Start MySQL service error occurs System error solution
Table of contents 1- Error details 2-Single Solut...
Resolving MySQL implicit conversion issues
1. Problem Description root@mysqldb 22:12: [xucl]...
Discussion on the problem of garbled characters in iframe page parameters
I encountered a very unusual parameter garbled pro...
Vue login function implementation
Table of contents Written in front Login Overview...