如何在vue js html中仅从日期中提取年份并仅打印那一年?

时间:2018-04-25 08:10:12

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

{"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);
            }           
            },
        });
},
})

4 个答案:

答案 0 :(得分:1)

我认为你有两个选择:

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

答案 1 :(得分:1)

BEWARE THE TIMEZONE。接受的答案落入了陷阱!将您的设备时区设置为减去任何东西(伦敦西部),您将获得2009年。

enter image description here

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

To do this safely, use getUTCFullYear()

答案 2 :(得分:0)

由于您有一个结构良好的日期字符串,您可以从字符串初始化日期对象并在其上调用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()

答案 3 :(得分:0)

你可以这样简单地给出。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="road-btn js-road-btn" data-lat-s='1' data-lng-s='2' data-lat-e='3' data-lng-e='4'> Click me </span >