VUEJS - 如何从 API 响应转换日期

Question

我正在用 API 做我的项目，响应中的默认生日是 YYYY-MM-DD 但我想格式化并显示我的生日这种格式的模态对话框 DD-MM-YYYY,

这是代码

axios
.post("test/test).
.then((response) => {
          if (response.data.patients.length === 0) {
            this.showAlert(this.$t("tess"), "error");
          } else {
            this.dataLoad = response.data.patients[0].patient;
            console.log(this.dataLoad);
          }
})

我将响应保存在 dataLoad 中，并希望在模态对话框中显示格式 DD-MM-YYYY

<v-row>
            <v-col cols="4">Birthdate</v-col>
            <v-col cols="1">:</v-col>
            <v-col cols="7">{{
              this.dataLoad && this.dataLoad.birthdate
            }}</v-col>
</v-row>

Answer 1

调用以下函数。

function formatDate(dateStr)
{
    var parts = dateStr.split("-"); 
    return parts[2]+ "-" + parts[1]+ "-" + parts[0];
}

或者，您可以按如下方式使用它。

<v-row>
        <v-col cols="4">Birthdate</v-col>
        <v-col cols="1">:</v-col>
        <v-col cols="7">{{
          this.dataLoad && this.dataLoad.birthdate.split("-").reverse().join("-")
        }}</v-col>
</v-row>

Answer 2

你可以首先准备好你想要的格式的出生日期，然后你可以将它加载到你的组件中：

    new Vue({
      el: '#vueRoot',
      data: {birthDate: '1963-11-22'},
      computed:{
        birthDateDdmm(){
          return new Date(this.birthDate + 'T00:00:00Z')
          .toLocaleDateString('en-GB',{timeZone:'UTC'})
        },
        birthDateAuto(){
          return new Date(this.birthDate + 'T00:00:00Z')
          .toLocaleDateString([],{timeZone:'UTC'})
        }
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id='vueRoot'>
      <h1>input => {{birthDate}}</h1>
      <h1>dd-MM-yy => {{birthDateDdmm}}</h1>
      <h1>respect user prefs => {{birthDateAuto}}</h1>
</div>

VUEJS - 如何从 API 响应转换日期

VUEJS - How to Convert Date from API Response

date-format

vue.js

vuetify.js