In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.