vue.js 如何获取日期和时间并在defineProps中显示？

qgelzfjb 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(149)

我正在做一个简单的VueJS应用程序，我想显示今天的日期和时间，并在DefineProps中定义它，我在我的组件中尝试了以下方法：
我想显示今天的日期和时间，并在定义它，我已经尝试了以下在我的组件：

<script setup>
const props = defineProps({
  dateandtime: String
})
</script>

在我看来，我有以下几点：

<Header dateandtime="test" />

我还尝试将new Date（）.toLocaleString（）放在dateandtime属性的旁边，我至少期望它能带来一些东西，但这并不容易。

vue.js

来源：https://stackoverflow.com/questions/77125715/how-do-i-get-the-date-and-time-and-display-it-in-a-defineprops

2条答案

按热度按时间

gjmwrych1#

如果你想把date作为props传递，你必须在父组件中生成你的date，在这个例子中是App.vue。defineProps只是作为一个接口来构造我们的props，并定义它们的类型、默认值或它们是否是必需的。根据您希望如何传递date prop，我在Header.vue中定义了String和Date作为可接受的prop类型。以下是您可以做到的方法：
App.vue

<script setup>
import { ref } from 'vue'
import Header from './Header.vue';

const todaysDate = ref(new Date().toLocaleString());
</script>

<template>
  <Header :date="todaysDate"></Header>  
  <Header :date="new Date('December 17, 1995 03:24:00')"></Header>  
</template>

Header.vue

<script setup>
const props = defineProps({
    date: [String, Date],
})
</script>

<template>
    <h2>{{ date }}</h2>
</template>

赞(0）回复(0）举报 2023-10-23

bttbmeg02#

首先，更新组件以将当前日期和时间作为属性传递：

<!-- Header.vue -->
<template>
  <div>
    <p>{{ dateandtime }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  dateandtime: String,
});
</script>

现在，在使用Header的父组件中，可以计算当前日期和时间，并将其作为属性传递：

<template>
  <div>
    <Header :dateandtime="currentDateTime" />
  </div>
</template>

<script setup>
import Header from './Header.vue';

const currentDateTime = new Date().toLocaleString();
</script>

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 如何获取日期和时间并在defineProps中显示？

2条答案

相关问题

热门标签

最新问答