我如何使用 v-model 和 moment js 提取动态数据

Question

我已经可以使用 v-model 从 api 中提取数据，但这是我看到日期的方式 2022-04-23T13:39:00+03:00 但我希望它以这种方式出现 2022-04-23 13:39

这是我的 html 代码

<Field
  class="form-control"
  type="text"
  v-model="date"
  name="date"
  :placeholder="$t('form.label.date')"
/>

这是我的 ts 代码

  data() {
    date:"",
  }
  setup() {
    const dateFormat = (date) => {
      return moment(date).format("YYYY-MM-DD HH:mm");
    };
  }

Answer 1

如果您只渲染值而不需要设置 two-way 绑定或反应性，您可以在将格式化值传递给模板之前解析格式。

您还可以将格式化程序函数传递给模板，该模板将呈现您喜欢的格式。

虽然有多种格式化日期的选项。为避免添加额外的依赖项，我在示例中使用了 Intl.DateTimeFormat。这有点老套，因为格式不符合任何国际标准（或者是，只是不知道是哪个）。我也成功地使用了 date-fns，但正如评论中所提到的，你不应该使用 moment. Moment 的构建方式不允许 tree-shaking 在打包过程中使用未使用的部件，因此会导致膨胀。

const formatter = (dateStr) => {
  const date = new Date(dateStr)
  if (isNaN(date)) return "-- invalid date --";

  // fr-CA for YYYY-MM-DD + en-GB for 24hour hh:mm:ss
  return new Intl.DateTimeFormat('fr-CA', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    timeZone: 'UTC'
  }).format(date) + " " + new Intl.DateTimeFormat('en-GB', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    timeZone: 'UTC'
  }).format(date)
}

Vue.createApp({
  setup() {
    const date = Vue.ref("2022-04-23T13:39:00+03:00");

    // using ref
    const dateFormatted = formatter(date.value);

    return {
      date, // date string ref, to allow reactivity
      dateFormatted, // pass non-reactive value to display
      formatter // pass formatter function if reactive changes are needed
    }
  }
}).mount("#app");

input {
  width: 400px;
  padding: 6px;
  margin-top: 2px;
}

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
<div id="app">
  <p>Date (v-model)<br/><input v-model="date" /></p>
  <p>Formatted with Intl (read-only)<br/> <input :value="dateFormatted" disabled/></p>
  <p>Reactive formatted with Intl (read-only)<br/> <input :value="formatter(date)" disabled /></p>
</div>

我如何使用 v-model 和 moment js 提取动态数据

How can i pull dynamic data using v-model and moment js

momentjs

vue.js

v-model

vuejs3