如何在 VueJS 中使用 <input type="date"> 然后 Date.prototype.getFullYear() ？答案

【问题标题】：How do I use <input type="date"> and then Date.prototype.getFullYear() in VueJS?如何在 VueJS 中使用 <input type="date"> 然后 Date.prototype.getFullYear() ？
【发布时间】：2018-05-31 17:42:52
【问题描述】：

我只是想要求用户输入一个日期，然后根据日/月/年采取行动。我也不想安装更多的依赖项。

我有：

<input type="date" v-model="dateOfBirth" />

和：

const vm = new Vue({
  el: '#app',
  data() {
    return {
      dateOfBirth: null,
    };
  },
  ...

当我做出选择时，我得到：

typeof vm.dateOfBirth === object

结果如下：

2018-05-11

但是我现在如何才能得到日/月/年，.getFullYear() 应该去哪里？它没有按我的预期工作，我已经在网上找到了所有我能找到的东西，请帮忙！

【问题讨论】：

日期类型的输入值是一个字符串。你必须做点什么like this。
太棒了，谢谢！！我真的每次都需要if (!this.dateOfBirth) {return null;}吗？我已经制作了年、月和日的计算属性，它们都以此开头，似乎并不干燥。我注意到我可以在方法中使用 vm.year，所以可以进行所有计算。我昨天才开始使用 Vue，并且已经爱上了它，在其中重新编写了一个应用程序来学习，这将节省大量时间 :)
检查只是为了避免在空值上调用函数。您可以初始化日期并避免它。我更新了上面的例子。
感谢您提供的信息！我发现如果我保留dateOfBirth: null 那么结果是Year: 1970 Month: 0 Day: 1 所以它似乎不能为空？在这两种情况下，这不会使if (!this.dateOfBirth) {return null;} 变得多余吗？是否要将其粘贴为答案，以便我投票正确？
你是对的，这可能不是绝对必要的；有一些你想要处理的极端情况，但我添加了答案。

标签： vuejs2

【解决方案1】：

日期输入的值是一个字符串，因此要调用getFullYear，您需要将其转换为日期。

在 Vue 中，您可以使用计算属性来做到这一点。这是一个例子。

console.clear()

new Vue({
  el: "#app",
  data:{
    dateOfBirth: new Date()
  },
  computed:{
    year(){
      return new Date(this.dateOfBirth).getFullYear()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input type="date" v-model="dateOfBirth">
  <hr>
  Year: {{year}}
</div>

这段代码不能处理所有的边缘情况，但应该会给你一些想法。

【讨论】：