如何仅从 vue js html 中的日期中提取年份并仅打印该年份？答案

【问题标题】：How to extract only year from date in vue js html and print only that year?如何仅从 vue js html 中的日期中提取年份并仅打印该年份？
【发布时间】：2018-10-05 15:03:47
【问题描述】：

{"status":true,"data":[{"_id":"5addb7cbcd79850454bceb9f","no":12123,"orDate":"2010-01-01T00:00:00.000Z","oldness":"5"},{"_id":"5ae02a26de15e934ac70ee8f","no":11223,"orDate":"2004-01-01T00:00:00.000Z","oldness":"5"},{"_id":"5ae02a26de257934ac70ee8f","no":12311,"orDate":"1994-01-01T00:00:00.000Z","oldness":"5"}]}

这是我的 json 响应。我只需要在 vue js html 中从 orDate 打印年份。

我怎样才能做到这一点。

我的html代码是

<div id="app">
<div v-for="aln in data">
{{aln._id}}
{{aln.no}}
{{aln.orDate}}
</div>
</div>

我或日期，我只需要打印从日期开始的年份。如果日期是 2010-01-01T00:00:00.000Z，我只需要打印 2010

我的vue js代码是

app = new Vue({
el: "#iapp",
  data: {
    data:[],
  },
mounted: function() {
 var vm = this;
         $.ajax({
            url: "http://localhost:4000/get/l/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
            if (e.status == 1) { 
             vm.data = e.data;
             console.log(vm.data);
            }           
            },
        });
},
})

【问题讨论】：

标签： javascript jquery html vue.js vue-component

【解决方案1】：

我认为你有两个选择：

"2010-01-01T00:00:00.000Z".slice(0,4)
new Date("2010-01-01T00:00:00.000Z").getFullYear()

【讨论】：

【解决方案2】：

BEWARE THE TIMEZONE。接受的答案落入陷阱！将您的设备时区设置为负数（伦敦西部），您将获得 2009 年。

到目前为止，从 ISO 日期字符串中恢复一年的最安全方法是 .substring(0,3)。如果您想将日期重新水化为日期对象，对其进行格式化、比较或进行算术运算，那么您需要非常小心以避免在序列化/显示时获得时区。

To do this safely, use getUTCFullYear()

【讨论】：

【解决方案3】：

既然你有一个格式良好的日期字符串，你可以从字符串中初始化一个日期对象并调用getFullYear()：

var date = new Date("2010-01-01T00:00:00.000Z");
console.log(date.getUTCFullYear());

您可以尝试在集合中创建这样的年份键，并在模板中使用该键：

success: function(e) {
  if (e.status == 1) { 
    vm.data = e.data;
    vm.data.forEach(item => {
      var date = new Date(item.orDate);
      item.year = date.getUTCFullYear();
    });
    ...
}

在您的模板中，而不是 orDate，而是显示 year。

{{aln.year}}

编辑 1：

正如@bbsimonbb 指出getFullYear() 的问题，我已经更新了我的代码以改用getUTCFullYear()。

【讨论】：

BEWARE THE TIMEZONE。 getFullYear() 将“帮助”推断当地时区。伦敦以西的任何地方，还不是 2010 年，你应该看到 2009 年？
@bbsimonbb -- 谢谢。我已经更新了我的代码来解决这个问题。

【解决方案4】：

你可以像这样简单地给予。

<div id="app">
<div v-for="aln in data">
{{aln._id}}
{{aln.no}}
{{new Date(aln.orDate).getFullYear()}}
</div>
</div>

【讨论】：

如何只显示该日期的 2000-10-01
@BegCoder，您可以使用它。 {{aln.orDate.toString().slice(0,10)}}