Web Front-end
JS Tutorial
Example of VUE component: How does VUE component implement countdown?
Example of VUE component: How does VUE component implement countdown?
This article brings you examples of VUE components: How does the VUE component implement countdown? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Rendering:
2. CSS code
.box{
width: 300px;
height: 100px;
line-height: 100px;
margin: 100px auto;
background-color: #eee;
text-align: center;
font-size: 30px;
color: #666;
}.count-number{
color: red;
font-size: 30px;
font-weight: bold;
}3 , HTML code
<p class="wrap">
<countdown seconds="15" index="1"></countdown>
<countdown seconds="30" index="2"></countdown></p>4. JavaScript code
// 倒计时组件
Vue.component('countdown', {
props: ['seconds', 'index'],
data: () => {
return {
timerCount: 0
}
},
mounted() {
this.timing();
},
methods: {
timing() {
let startTime = localStorage.getItem(`startTime${this.index}`);
let nowTime = new Date().getTime();
if(startTime) {
let surplus = this.seconds - parseInt((nowTime-startTime) / 1000, 10);
this.timerCount = surplus <= 0 ? 0 : surplus;
} else {
this.timerCount = this.seconds;
localStorage.setItem(`startTime${this.index}`, nowTime);
}
let timer = setInterval(() => {
if(this.timerCount > 0 && this.timerCount <= this.seconds) {
this.timerCount--;
} else {
localStorage.removeItem(`startTime${this.index}`);
clearInterval(timer);
}
}, 1000);
}
},
template: `<div class="box">倒计时 <span class="count-number">{{timerCount < 10 ? '0' + timerCount : timerCount}}</span> 秒</div>`
});
// Vue实例
new Vue({
el: '.wrap'
});Related recommendations:
Prototype mechanism in JS: Implement inheritance and extension of constructors and their instances
Communication between Vue child components and parent components (with code)
The above is the detailed content of Example of VUE component: How does VUE component implement countdown?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1381
52
Vue component communication: use $destroy for component destruction communication
Jul 09, 2023 pm 07:52 PM
Vue component communication: Use $destroy for component destruction communication In Vue development, component communication is a very important aspect. Vue provides a variety of ways to implement component communication, such as props, emit, vuex, etc. This article will introduce another method of component communication: using $destroy for component destruction communication. In Vue, each component has a life cycle, which includes a series of life cycle hook functions. The destruction of components is also one of them. Vue provides a $de
How does Vue implement component reuse and extension?
Jun 27, 2023 am 10:22 AM
With the continuous development of front-end technology, Vue has become one of the popular frameworks in front-end development. In Vue, components are one of the core concepts, which can break down pages into smaller, more manageable parts, thereby improving development efficiency and code reusability. This article will focus on how Vue implements component reuse and extension. 1. Vue component reuse mixins Mixins are a way to share component options in Vue. Mixins allow component options from multiple components to be combined into a single object for maximum
Vue practice: date picker component development
Nov 24, 2023 am 09:03 AM
Vue Practical Combat: Date Picker Component Development Introduction: The date picker is a component often used in daily development. It can easily select dates and provides various configuration options. This article will introduce how to use the Vue framework to develop a simple date picker component and provide specific code examples. 1. Requirements analysis Before starting development, we need to conduct a requirements analysis to clarify the functions and characteristics of the components. According to the common date picker component functions, we need to implement the following function points: Basic functions: able to select dates, and
Vue component communication: using watch and computed for data monitoring
Jul 10, 2023 am 09:21 AM
Vue component communication: using watch and computed for data monitoring Vue.js is a popular JavaScript framework, and its core idea is componentization. In a Vue application, data needs to be transferred and communicated between different components. In this article, we will introduce how to use Vue's watch and computed to monitor and respond to data. watch In Vue, watch is an option, which can be used to monitor the changes of one or more properties.
How to use third-party libraries in Vue projects
Oct 15, 2023 pm 04:10 PM
Vue is a popular JavaScript framework that provides a wealth of tools and features to help us build modern web applications. Although Vue itself already provides many practical functions, sometimes we may need to use third-party libraries to extend Vue's capabilities. This article will introduce how to use third-party libraries in Vue projects and provide specific code examples. 1. Introduce third-party libraries The first step to using third-party libraries in a Vue project is to introduce them. We can introduce it in the following ways
In-depth understanding of Vue's component life cycle
Oct 15, 2023 am 09:07 AM
To deeply understand Vue's component life cycle, you need specific code examples. Introduction: Vue.js is a progressive JavaScript framework that is favored by developers for its simplicity, ease of learning, efficiency and flexibility. In the component development of Vue, understanding the life cycle of components is an important part. This article will delve into the life cycle of Vue components and provide specific code examples to help readers better understand and apply them. 1. Life cycle diagram of Vue components The life cycle of Vue components can be regarded as components
Vue component development: implementation method of tab page component
Nov 24, 2023 am 08:41 AM
Vue component development: Tab component implementation method In modern web applications, the tab page (Tab) is a widely used UI component. The Tab component can display multiple related content on a single page and switch them by clicking on the tab. In this article, we will introduce how to implement a simple tab component using Vue.js and provide detailed code examples. The structure of the Vue tab component. The tab component usually consists of two parts: tab and panel. Labels are used to identify surfaces
How to switch between multiple data interaction methods in Vue components
Oct 08, 2023 am 11:37 AM
How to switch between multiple data interaction methods in Vue components. When developing Vue components, you often encounter scenarios where you need to switch to different data interaction methods, such as requesting data through APIs, entering data through forms, or pushing data in real time through WebSocket, etc. . This article will introduce how to implement this switching of multiple data interaction methods in Vue components, and provide specific code examples. Method 1: API request data In some cases, we need to request data through API to obtain background data. under
