Tukar masa vue kepada bulan dan hari

Vue ialah rangka kerja JavaScript popular yang membolehkan pembangun membuat aplikasi web interaktif dengan mudah. Dalam banyak aplikasi, kita perlu menukar cap masa kepada format tarikh yang mudah dibaca dan digunakan, seperti tahun, bulan dan hari. Artikel ini akan memperkenalkan cara menggunakan Vue untuk menukar cap masa kepada format tahun, bulan dan hari.

Mula-mula, mari kita buat contoh Vue untuk dapat menggunakan fungsi penukaran masa Vue:

<div id="app">
  <p>{{ formatDate(1625233266000) }}</p>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    formatDate: function(timestamp) {
      var date = new Date(timestamp);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    }
  }
});
</script>

Dalam contoh ini, kami menggunakan objek Tarikh untuk menghuraikan cap masa dan memformatkannya Ia adalah rentetan tahun, bulan dan hari.

Dalam Vue, kami boleh menghantar cap masa kepada format fungsi tersuaiDate dan menggunakan objek Date untuk menukarnya kepada format tahun, bulan dan hari. Dalam fungsi, kita mula-mula mendapatkan tahun menggunakan fungsi getFullYear, kemudian dapatkan bulan menggunakan fungsi getMonth dan tambah 1 padanya (kerana bulan mula dikira dari 0), dan akhirnya dapatkan tarikh menggunakan fungsi getDate.

Dalam templat, kami membalut panggilan fungsi dengan kurungan berganda untuk memastikan ia berjalan dalam konteks contoh Vue.

Selain kaedah di atas, Vue juga menyediakan penapis terbina dalam yang dipanggil Vue.filter, yang boleh menukar cap masa kepada format tahun, bulan dan hari dengan mudah. Kita boleh mencapai ini menggunakan kod berikut:

<div id="app">
  <p>{{ timestamp | formatDate }}</p>
</div>

<script>
new Vue({
  el: '#app',
  filters: {
    formatDate: function(timestamp) {
      var date = new Date(timestamp);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    }
  }
});
</script>

Dalam contoh ini, kami telah menentukan penapis yang dipanggil formatDate dalam sifat penapis bagi tika Vue. Cap masa boleh dihantar sebagai parameter untuk menapis menggunakan simbol paip (|). Dalam fungsi penapis, kami mengikuti pendekatan yang sama seperti kaedah sebelumnya, menggunakan objek Tarikh untuk memformat cap masa menjadi rentetan tahun, bulan dan hari.

Akhir sekali, kita boleh menukar nilai cap masa kepada rentetan tahun, bulan dan hari dengan membungkus ungkapan paip dengan kurungan berganda dalam templat.

Ringkasnya, menukar cap masa kepada rentetan tahun, bulan dan hari adalah sangat mudah dalam aplikasi Vue. Kita boleh mencapai ini menggunakan kaedah tersuai atau penapis terbina dalam. Tidak kira kaedah yang digunakan, Vue ialah rangka kerja yang berkuasa dan mudah digunakan yang membantu pembangun membina aplikasi web dengan lebih mudah.

Atas ialah kandungan terperinci Tukar masa vue kepada bulan dan hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!