Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the effect of simple Racing Lantern by Vue

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail "Vue how to achieve the simple racing lantern effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue how to achieve the simple racing lantern effect" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Vue racing lantern effect:

1. Analysis.

a. Click the "come on" button to bind a click event, using v-on or the abbreviation: "@"

b. In the button event handling function, write the relevant business logic code: get the msg string, then call the substring of the string to intercept the string, intercept the first character and put it in the last position

In order to click the button and intercept automatically, you need to put the code in step 2 into a timer.

two。 Realize

2.1. Bind event

Var vm = new Vue ({el:'# app', data: {msg: 'come on, Xiao Qiang, you're the best!' , intervalId: null / / define timer Id} on data, methods: {lang () {}, stop () {}})

2.2. Dynamic interception plus timing

Var vm = new Vue ({el:'# app', data: {msg: 'come on, Xiao Qiang, you're the best!' , intervalId: null / / define timer Id} on data, methods: {lang () {/ / get the first character of the header / / this if (this.intervalId! = null) return This.intervalId = setInterval (() = > {var start = this.msg.substring (0,1) / / get all the following characters var end = this.msg.substring (1) / / re-concatenate to get a new string And assign a value to this.msg this.msg = end + start}, 400) / Note: a VM instance will listen for changes in all data in its data. As soon as the data changes, it will automatically synchronize the latest data from the data to the page. [benefit: programmers only need to care about data, not how to re-render DOM pages]}, stop () {}})

2.3. Cancel the timer

Stop () {/ / stop timer clearInterval (this.intervalId) / / whenever you clear the timer, you need to reset intervalId to null this.intervalId = null;}

2.4, complete code

Document {{msg}} / / Analysis: / / 1. Give the Wave button and bind a click event v-on @ / / 2. In the button event handling function, write the relevant business logic code: get the msg string, then call the substring of the string to intercept the string, intercept the first character and put it in the last position; / / 3. In order to click the button and intercept automatically, you need to put the code in step 2 into a timer. / / Note: in VM instances, if you want to get data on data, or if you want to call methods in methods, you must go through this. Data property name or this. The this here means that the VM instance object var vm = new Vue from our new ({el:'# app', data: {msg: 'come on, Xiaoqiang, you are the best!' , intervalId: null / / define timer Id} on data, methods: {lang () {/ / console.log (this.msg) / / get the first character of the header / / this if (this.intervalId! = null) return This.intervalId = setInterval (() = > {var start = this.msg.substring (0,1) / / get all the following characters var end = this.msg.substring (1) / / re-concatenate to get a new string And assign a value to this.msg this.msg = end + start}, 400) / Note: a VM instance will listen for changes in all data in its data. As soon as the data changes, it will automatically synchronize the latest data from the data to the page. [benefit: programmers only need to care about data, not how to re-render DOM pages]}, stop () {/ / stop timer clearInterval (this.intervalId) / / whenever the timer is cleared, intervalId needs to be re-set to null this.intervalId = null;}})

Final effect

After reading this, the article "how to achieve the effect of simple racing lanterns in Vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 277

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report