How to realize the effect of Racing Lantern by Vue

This article mainly introduces Vue how to achieve racing lantern effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

1. The effect of racing lantern

Description: click the "backup" button text to float to the left, and then click the "pause" button to stop the current flutter.

2. Complete code (Note: the vue.js file needs to be introduced in the code, which is introduced according to the directory location, and there are comments in the specific location code)

Racing Lantern # app {padding: 20px } new Vue {{msg}} new Vue ({el: "# app", data: {msg: "friend, friend, I love you, just like a mouse loves rice!", timer:null / / define a timer timer on data Default is null}, methods: {run () {/ / return if (this.timer) {return} if timer has been assigned This.timer = setInterval (() = > {/ / msg is split into an array var arr = this.msg.split (''); / / shift deletes and returns the deleted one, and push is added to the last / / put the first element of the array into the last arr.push (arr.shift ()) / / arr.join ('') concatenate the array as a string to copy to msg this.msg = arr.join ('')}, stop () {/ / clear timer clearInterval (this.timer) / / after clearing the timer, you need to re-set the timer to null this.timer = null;}) this is all the content of the article "how to achieve the racing lantern effect in Vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!