Comment afficher dynamiquement le jour de la semaine à l'aide de Vue.js

Avec le développement d'Internet, la technologie frontale est constamment mise à niveau et mise à jour. En tant que framework JavaScript moderne, Vue.js est utilisé par de plus en plus de développeurs. Dans Vue.js, nous avons souvent besoin d'afficher la date et l'heure actuelles, notamment le jour de la semaine. Cet article explique comment utiliser Vue.js pour afficher dynamiquement le jour de la semaine.

1. Obtenir la date actuelle

Pour obtenir la date actuelle, nous devons utiliser l'objet intégré Date en JavaScript. Tout d’abord, nous devons obtenir la date actuelle via le code suivant.

let today = new Date();

Cette ligne de code créera un objet Date et l'attribuera à la variable aujourd'hui.

2. Obtenir le jour actuel de la semaine

Pour obtenir le jour actuel de la semaine, nous pouvons utiliser la méthode getDay() de l'objet Date. Cette méthode renverra un nombre compris entre 0 et 6, représentant respectivement du dimanche au samedi.

let weekday = today.getDay();

A ce moment, la variable jour de la semaine stocke un nombre compris entre 0 et 6.

3. Afficher le jour de la semaine

Maintenant, nous pouvons convertir les chiffres en texte correspondant du jour de la semaine. Afin de réaliser cette fonction, nous pouvons générer dynamiquement le jour de la semaine via la propriété calculée dans Vue.js. Le code suivant montre comment afficher le jour de la semaine à l'aide d'une propriété calculée.

<template>
  <div>
    <p>今天是{{ weekDay }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    weekDay: function() {
      let days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let today = new Date();
      let weekday = today.getDay();
      return days[weekday];
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un attribut calculé weekDay, qui générera automatiquement le texte du jour de la semaine en fonction de la date du jour. Pour le moment, il suffit d'utiliser {{ weekDay }} directement dans le modèle pour afficher dynamiquement le jour de la semaine où nous sommes aujourd'hui.

4. Ajouter des styles

Afin de rendre notre page plus belle, nous pouvons ajouter quelques styles au texte du jour de la semaine. Le code ci-dessous définira le texte du jour de la semaine en rouge et l'agrandira.

<template>
  <div>
    <p class="week-day">今天是{{ weekDay }}</p>
  </div>
</template>

<style>
.week-day {
  color: red;
  font-size: 1.2rem;
}
</style>

Exécutez le code ci-dessus et vous verrez que le jour de la semaine correspondant à la date actuelle est affiché dynamiquement sur la page, et le texte sera affiché en rouge et agrandi.

Résumé

Cet article explique comment utiliser Vue.js pour afficher dynamiquement le jour de la semaine et ajouter des styles au texte. En étudiant cet article, vous pouvez apprendre à utiliser Vue.js pour développer des pages Web plus dynamiques et plus belles. Avec un apprentissage et une pratique continus, nous pensons que vous pouvez également devenir un excellent développeur front-end !

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!