Как извлечь только год из даты в vue js html и распечатать только этот год? - PullRequest
Новая
       8

Как извлечь только год из даты в vue js html и распечатать только этот год?

0 голосов
/ 25 апреля 2018 
{"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. Мне нужно напечатать только год от orDate в vue js html.

Как я могу добиться того же.

Мой HTML-код 

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

I orDate, мне нужно печатать только год с даты. Если дата 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 голосов
/ 25 апреля 2018

ОСТЕРЕГАЙТЕСЬ ВРЕМЕНИ .Принятый ответ попадает в ловушку!Установите часовой пояс устройства на что-нибудь минус (к западу от Лондона), и вы получите 2009 год.

enter image description here

На сегодняшний день самый безопасный способ восстановить год отстрока даты ISO - .substring(0,3).Если вы хотите преобразовать дату в объект даты, отформатировать ее, сравнить или сделать арифметику, то вам нужно быть очень осторожным, чтобы избежать получения часового пояса при сериализации / отображении.

Чтобы сделать это безопасно, используйте getUTCFullYear()

0 голосов
/ 25 апреля 2018

Я думаю, у вас есть 2 варианта:

  1. "2010-01-01T00:00:00.000Z".slice(0,4)
  2. new Date("2010-01-01T00:00:00.000Z").getFullYear()
0 голосов
/ 25 апреля 2018

Вы можете просто так дать. 

<div id="app">
<div v-for="aln in data">
{{aln._id}}
{{aln.no}}
{{new Date(aln.orDate).getFullYear()}}
</div>
</div>
0 голосов
/ 25 апреля 2018

Поскольку у вас правильно сформированная строка даты, вы можете инициализировать объект даты из строки и вызвать 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().

...