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
Nginx configuration and compatibility with HTTP implementation code analysis
Generate SSL Key and CSR file using OpenSSL To co...
How to change the website accessed by http to https in nginx
Table of contents 1. Background 2. Prerequisites ...
HTML iframe usage summary collection
Detailed Analysis of Iframe Usage <iframe frame...
Webpack builds scaffolding to package TypeScript code
Create a folder Directory structure: dabaots Init...
How to reference external CSS files and iconfont in WeChat applet wxss
cause The way to import external files into a min...
Difference between HTML ReadOnly and Enabled
The TextBox with the ReadOnly attribute will be di...
WeChat applet uniapp realizes the left swipe to delete effect (complete code)
WeChat applet uniapp realizes the left swipe to d...
Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS
In the past, float was often used for layout, but...
MySQL 8.0 can now handle JSON
Table of contents 1. Brief Overview 2. JSON basic...
MySQL 5.7.23 decompression version installation tutorial with pictures and text
Download the MySQL installer Official download ad...
Implementing a web calculator based on JavaScript
This article shares the specific code of JavaScri...
A performance bug about MySQL partition tables
Table of contents 2. Stack analysis using pt-pmap...
Troubleshooting process for Docker container suddenly failing to connect after port mapping
1. Background Generally, for Docker containers th...
innodb_flush_method value method (example explanation)
Several typical values of innodb_flush_method f...
CocosCreator Getting Started Tutorial: Making Your First Game with TS
Table of contents premise TypeScript vs JavaScrip...