How to realize the Special effect of simple Racing Lantern in Vue

This article mainly introduces the relevant knowledge of "how to achieve simple horse racing lantern special effects in Vue". The editor shows you the operation process through actual cases, the operation method is simple and fast, and has strong practicability. I hope this article "how to achieve simple horse racing lantern special effects in Vue" can help you solve the problem.

Effect:

Click the button to make the text move, click the stop button to make the text stop

Knowledge points:

Substring (string interception)

SetInterval timer (controls the speed of text movement)

ClearInterval clear timer (control text stop)

Code display: # app {width: 200px; height: 120px; background-color: pink; text-align: center; border-bottom: 1px solid # cfccc5;} {{text}}

Floating fixed new Vue ({el: "# app", data: {text: "Racing Lantern effect!" , flag:null}, methods: {piao () {/ / return if (this.flag) {return} if ind has been assigned This.flag = setInterval (() = > {/ / intercept the first character var head = this.text.substring (0Jue 1); / / intercept all characters except the first character var foot = this.text.substring (1) / / this.text = foot + head;}, 100)}, ding () {/ / clear timer clearInterval (this.flag) / / leave flag empty or the next click on the text will not move this.flag=null;})

Effect:

This is the end of the content about "how to achieve simple racing lantern special effects in Vue". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.