How to achieve digital scrolling effect in vue? code example
Dec 01, 2020 pm 05:30 PM項(xiàng)目中需要做數(shù)字滾動(dòng)增加的效果,一開(kāi)始很懵,研究了一下原理,發(fā)現(xiàn)很簡(jiǎn)單,貼出來(lái)分享一下 ^_^
數(shù)字滾動(dòng)組件:
<template> <p class="number-grow-warp"> ??<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> ??</p> </template> <script>?export?default?{ ??props:?{ ????time:?{ ??????type:?Number, ??????default:?2 ????}, ????value:?{ ??????type:?Number, ??????default:?720000 ????} ??}, ??methods:?{ ????numberGrow?(ele)?{ ??????let?_this?=?this ??????let?step?=?(_this.value?*?10)?/?(_this.time?*?1000) ??????let?current?=?0 ??????let?start?=?0 ??????let?t?=?setInterval(function?()?{ ????????start?+=?step ????????if?(start?>?_this.value)?{ ??????????clearInterval(t) ??????????start?=?_this.value ??????????t?=?null ????????} ????????if?(current?===?start)?{ ??????????return ????????} ????????current?=?start ????????ele.innerHTML?=?current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g,?'$1,') ??????},?10) ????} ??}, ??mounted?()?{ ????this.numberGrow(this.$refs.numberGrow) ??} }?</script> <style>?.number-grow-warp{ ??transform:?translateZ(0); } .number-grow?{ ??font-family:?Arial-BoldMT; ??font-size:?64px; ??color:?#ffaf00; ??letter-spacing:?2.67px; ??margin:110px?0?20px; ??display:?block; ??line-height:64px; }?</style>
調(diào)用:
<NumberGrow :value="720000"></NumberGrow>
相關(guān)推薦:
更多編程相關(guān)知識(shí),請(qǐng)?jiān)L問(wèn):編程入門?。?br>
The above is the detailed content of How to achieve digital scrolling effect in vue? code example. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning

Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn

Vue.js is not difficult to learn, especially for developers with a JavaScript foundation. 1) Its progressive design and responsive system simplify the development process. 2) Component-based development makes code management more efficient. 3) The usage examples show basic and advanced usage. 4) Common errors can be debugged through VueDevtools. 5) Performance optimization and best practices, such as using v-if/v-show and key attributes, can improve application efficiency.
