Cara memaparkan hari dalam seminggu secara dinamik menggunakan Vue.js

Dengan perkembangan Internet, teknologi bahagian hadapan sentiasa dinaik taraf dan dikemas kini. Sebagai rangka kerja JavaScript moden, Vue.js digunakan oleh semakin ramai pembangun. Dalam Vue.js, kita selalunya perlu memaparkan tarikh dan masa semasa, terutamanya hari dalam minggu itu. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk memaparkan hari dalam seminggu secara dinamik.

1. Dapatkan tarikh semasa

Untuk mendapatkan tarikh semasa, kita perlu menggunakan tarikh objek terbina dalam dalam JavaScript. Pertama, kita perlu mendapatkan tarikh semasa melalui kod berikut.

let today = new Date();

Barisan kod ini akan mencipta objek Tarikh dan menetapkannya kepada pembolehubah hari ini.

2. Dapatkan hari semasa dalam minggu

Untuk mendapatkan hari semasa dalam minggu, kita boleh menggunakan kaedah getDay() bagi objek Tarikh. Kaedah ini akan mengembalikan nombor antara 0 dan 6, masing-masing mewakili Ahad hingga Sabtu.

let weekday = today.getDay();

Pada masa ini, pembolehubah hari bekerja menyimpan nombor antara 0 dan 6.

3. Tunjukkan hari dalam seminggu

Kini kita boleh menukar nombor kepada teks yang sepadan pada hari dalam seminggu. Untuk mencapai fungsi ini, kami boleh menjana hari dalam seminggu secara dinamik melalui harta yang dikira dalam Vue.js. Kod berikut menunjukkan cara memaparkan hari dalam seminggu menggunakan harta yang dikira.

<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>

Dalam kod di atas, kami mentakrifkan atribut dikira weekDay, yang akan menjana teks hari dalam minggu secara automatik berdasarkan tarikh hari ini. Pada masa ini, kami hanya perlu menggunakan {{ weekDay }} terus dalam templat untuk memaparkan secara dinamik hari dalam minggu itu hari ini.

4. Tambah gaya

Untuk menjadikan halaman kami lebih cantik, kami boleh menambah beberapa gaya pada teks hari dalam seminggu. Kod di bawah akan menetapkan teks hari dalam seminggu kepada merah dan menjadikannya lebih besar.

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

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

Jalankan kod di atas, anda akan melihat bahawa hari dalam minggu yang sepadan dengan tarikh semasa dipaparkan secara dinamik pada halaman, dan teks akan dipaparkan dalam warna merah dan dibesarkan.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue.js untuk memaparkan hari dalam minggu secara dinamik dan menambahkan beberapa gaya pada teks. Dengan mempelajari artikel ini, anda boleh mempelajari cara menggunakan Vue.js untuk membangunkan lebih banyak halaman web yang dinamik dan cantik. Dengan pembelajaran dan amalan berterusan, kami percaya anda juga boleh menjadi pembangun bahagian hadapan yang cemerlang!

Atas ialah kandungan terperinci Cara memaparkan hari dalam seminggu secara dinamik menggunakan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!