vue3获取当前时间与日期格式化

1.获取当前时间格式化 

  <template>

    <div>

      <p>当前时间：{{ currentTime }}</p>

    </div>

  </template>

  <script setup>

  import { ref, onMounted } from 'vue';

  const currentTime = ref('');

  onMounted(() => {

    updateCurrentTime();

    setInterval(updateCurrentTime, 1000); // 每秒更新一次时间

  });

  function updateCurrentTime() {

    const now = new Date();

    currentTime.value = now.toLocaleTimeString();

  }

  </script>

2.获取当前日期格式化 

  <template>

    <div>

             <p>刷新时间: {{ currentYear }}-{{ currentMonth }}-{{currentDay }}</p>

    </div>

  </template>

  <script setup>

        import { ref, onMounted } from 'vue';

        const currentYear = ref('');

        const currentMonth = ref('');

        const currentDay = ref('');

        function updateCurrentDate() {

            const now = new Date();

            currentYear.value = now.getFullYear();

            currentMonth.value = now.getMonth() + 1;

            currentDay.value = now.getDate();

        }

        onMounted(() => {

            updateCurrentDate();

        });

   </script>