如何将HTML5 date输入转换为ISO日期格式并存入模型？

针对你在循环场景下没法用计算属性的情况，这里有几个实用的方案：

1. 模板内联转换（最快实现） #

直接在v-bind:value里完成日期转换，不需要额外的方法或预处理：

<b-form-input 
  type="date"
  :value="eventDate.date ? new Date(eventDate.date).toISOString() : ''"
/>

原理很直观：new Date("2018-12-31")会把HTML5日期输入返回的字符串转成Date对象，调用toISOString()就会输出"2018-12-31T00:00:00.000Z"这种UTC格式的字符串。加空值判断是为了避免日期为空时出现Invalid Date的异常。

2. 提前预处理数据（最优雅） #

如果你的日期数据是从接口获取的，可以在拿到数据时就统一转换格式，这样模板里直接使用即可：

// 假设用axios获取事件列表
axios.get('/api/events')
  .then(res => {
    this.events = res.data.map(event => ({
      ...event,
      // 统一把date字段转成目标格式
      date: event.date ? new Date(event.date).toISOString() : null
    }))
  })

之后循环里无论是渲染{{ eventDate.date }}还是绑定到输入框，都是你需要的ISO格式。

3. 定义组件方法复用（最灵活） #

如果多个地方都需要这个转换逻辑，或者觉得内联代码不够清晰，可以在组件里定义一个专用方法：

<script>
export default {
  methods: {
    convertToISO(dateStr) {
      if (!dateStr) return ''
      return new Date(dateStr).toISOString()
    }
  }
}
</script>

<template>
  <div v-for="eventDate in events" :key="eventDate.id">
    <b-form-input 
      type="date"
      :value="convertToISO(eventDate.date)"
    />
  </div>
</template>

这个方法在循环里完全可用，而且逻辑集中，方便后续修改或扩展。

注意事项 #

• toISOString()生成的是UTC时区的日期字符串（末尾的Z代表UTC），刚好匹配你需要的格式；如果业务需要本地时区的ISO格式，可能需要额外处理，但针对HTML5日期输入的输出场景，原生方法完全够用。
• 原生new Date()对YYYY-MM-DD格式的解析是可靠的，如果你遇到非标准格式的日期字符串，可以考虑用dayjs、date-fns这类轻量库做更稳定的解析。

内容的提问来源于stack exchange，提问作者Tom Franssen