Table des matières
hello world~
Maison interface Web Voir.js Comment utiliser la minuterie dans vue.js

Comment utiliser la minuterie dans vue.js

Nov 10, 2020 pm 02:03 PM
vue.js 定时器

Comment utiliser les timers dans vue.js : 1. Utilisez une boucle pour exécuter setInterval. Cette méthode sera exécutée à chaque fois jusqu'à ce que le timer soit détruit. 2. Exécutez setTimeout régulièrement et setTimeout. une heure et ne l'exécutez qu'une seule fois lorsque le temps d'attente est atteint.

Comment utiliser la minuterie dans vue.js

[Articles connexes recommandés : vue.js]

Utilisé dans vue.js Méthodes de minuterie :

1. Exécution de boucle (setInterval)

Comme son nom l'indique, l'exécution de boucle consiste à définir un intervalle de temps, qui sera exécuté chaque time Cette méthode, jusqu'à ce que le timer soit détruit

L'utilisation est setInterval ("nom de la méthode ou méthode", "delay"), le premier paramètre est le nom de la méthode ou la méthode, veillez à ne pas l'utiliser quand il est le nom de la méthode Ajouter des parenthèses, le deuxième paramètre est l'intervalle de temps

<template>
  <section>
    <h1 id="hello-nbsp-world">hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: &#39;&#39;,
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>
Copier après la connexion

Comment utiliser la minuterie dans vue.js

L'exemple ci-dessus consiste à créer un timer setInterval lorsque la page est initialisée, l'intervalle de temps est 1 seconde, chaque seconde La fonction get sera appelée une fois, augmentant ainsi la valeur de value de un.

2. Exécution planifiée (setTimeout)

L'exécution planifiée setTimeout consiste à définir une heure Lorsque le temps d'attente est atteint, il ne sera exécuté qu'une seule fois, mais le. le timer sera toujours là après l'exécution, mais ne fonctionnera pas

L'utilisation est setTimeout("method name or method", "delay"); parenthèses quand il s'agit du nom de la méthode, le deuxième paramètre Le paramètre est l'intervalle de temps

<template>
  <section>
    <h1 id="hello-nbsp-world">hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: &#39;&#39;,
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>
Copier après la connexion

Comment utiliser la minuterie dans vue.js

Ce qui précède consiste à créer un timer setTimeout lorsque la page est initialisée, et à l'exécuter uniquement la méthode une fois après 1 seconde.

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Parlons en profondeur de reactive() dans vue3 Parlons en profondeur de reactive() dans vue3 Jan 06, 2023 pm 09:21 PM

Avant-propos : Dans le développement de vue3, réactif fournit une méthode pour implémenter des données réactives. Il s'agit d'une API fréquemment utilisée dans le développement quotidien. Dans cet article, l’auteur explorera son mécanisme de fonctionnement interne.

Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue Apr 24, 2023 am 10:52 AM

Ace est un éditeur de code intégrable écrit en JavaScript. Il correspond aux fonctionnalités et aux performances des éditeurs natifs comme Sublime, Vim et TextMate. Il peut être facilement intégré à n’importe quelle page Web et application JavaScript. Ace est maintenu en tant qu'éditeur principal de l'IDE Cloud9 et est le successeur du projet Mozilla Skywriter (Bespin).

Découvrez comment écrire des tests unitaires dans Vue3 Découvrez comment écrire des tests unitaires dans Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js est devenu aujourd'hui un framework très populaire dans le développement front-end. À mesure que Vue.js continue d'évoluer, les tests unitaires deviennent de plus en plus importants. Aujourd'hui, nous allons explorer comment écrire des tests unitaires dans Vue.js 3 et fournir quelques bonnes pratiques ainsi que des problèmes et solutions courants.

Quelle est la différence entre la composantisation et la modularisation dans Vue Quelle est la différence entre la composantisation et la modularisation dans Vue Dec 15, 2022 pm 12:54 PM

La différence entre la modularisation et la modularisation : la modularisation est divisée du point de vue de la logique du code ; elle facilite le développement en couches de code et garantit la cohérence des fonctions de chaque module fonctionnel. La composantisation est planifiée du point de vue de l'interface utilisateur ; la composantisation du frontal facilite la réutilisation des composants de l'interface utilisateur.

Discussion approfondie sur la façon dont vite analyse les fichiers .env Discussion approfondie sur la façon dont vite analyse les fichiers .env Jan 24, 2023 am 05:30 AM

Lorsque nous utilisons le framework Vue pour développer des projets front-end, nous déploierons plusieurs environnements lors du déploiement. Souvent, les noms de domaine d'interface appelés par les environnements de développement, de test et en ligne sont différents. Comment peut-on faire la distinction ? Cela utilise des variables et des modèles d'environnement.

Analyser le principe de mise en œuvre de l'API de composition de Vue2 Analyser le principe de mise en œuvre de l'API de composition de Vue2 Jan 13, 2023 am 08:30 AM

Depuis la sortie de Vue3, l'API de composition de mots est entrée dans le champ de vision des étudiants qui écrivent Vue. Je pense que tout le monde a toujours entendu à quel point l'API de composition est meilleure que l'API d'options précédente, grâce à la sortie de @. plug-in vue/composition-api, Vue2 Les étudiants peuvent également monter dans le bus. Ensuite, nous utiliserons principalement responsive ref et reactive pour effectuer une analyse approfondie de la façon dont ce plug-in y parvient.

Exemple détaillé de vue3 réalisant l'effet machine à écrire de chatgpt Exemple détaillé de vue3 réalisant l'effet machine à écrire de chatgpt Apr 18, 2023 pm 03:40 PM

Lorsque je travaillais sur le site miroir chatgpt, j'ai découvert que certains sites miroir n'avaient pas d'effets de curseur de machine à écrire, mais seulement une sortie de texte. Ne voulaient-ils pas le faire ? Je veux le faire de toute façon. Je l'ai donc étudié attentivement et j'ai réalisé l'effet de la machine à écrire et du curseur. Je vais maintenant partager ma solution et mes rendus ~.

Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers Mar 24, 2023 pm 07:40 PM

Dans le processus de développement réel du projet, il est parfois nécessaire de télécharger des fichiers relativement volumineux, puis le téléchargement sera relativement lent, de sorte que l'arrière-plan peut nécessiter que le front-end télécharge des tranches de fichiers. Par exemple, 1 A. Le flux de fichiers de gigaoctets est découpé en plusieurs petits flux de fichiers, puis l'interface est invitée à fournir respectivement les petits flux de fichiers.

See all articles