vue中数据格式修改

Question

如果是2023/3/5，改成2023-03-05，如果是2023/10/11,改成2023-10-11，小于9的前面加0，大于9的原样改出

Answer 1

参考GPT和自己的思路：你可以使用 JavaScript 的 Date 对象和字符串操作来处理这个问题。以下是一个示例函数，将将输入的日期字符串转换为所需的格式：

function formatDate(dateString) {
  // 将日期字符串转换为 Date 对象
  const date = new Date(dateString);
  // 从 Date 对象中获取年、月、日信息
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  // 通过字符串操作将年、月、日格式化为所需格式
  const formattedMonth = month < 10 ? `0${month}` : month;
  const formattedDay = day < 10 ? `0${day}` : day;
  // 返回格式化后的日期字符串
  return `${year}-${formattedMonth}-${formattedDay}`;
}

你可以将这个函数应用于你的 Vue 组件中：

<template>
  <div>
    <p>原始日期字符串：{{ dateString }}</p>
    <p>格式化后的日期字符串：{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateString: '2023/3/5',
    };
  },
  computed: {
    formattedDate() {
      return formatDate(this.dateString);
    },
  },
};
</script>

在这个示例中，我们将原始日期字符串传递给 formatDate 函数，然后将格式化后的日期字符串作为计算属性 formattedDate 的值。在模板中，我们使用这个计算属性来显示格式化后的日期字符串。