如何在vuejs中输入输入字段时格式化日期？

Question

我有一个包含 (MM/DD/YYYY) 格式的日期值的文本字段。每当我输入 01242022 时，它应该被自动格式化并显示为 01/24/2022。我尝试了以下方式按预期显示值，但我希望它是实时的。当我们改变输入元素的焦点时，这是有效的。任何帮助表示赞赏。谢谢

 Vue.filter("formatDate", function (value) {
        let dateValue = value;
        if (dateValue.length === 2 || dateValue.length === 5) {
          dateValue = value + "/";
        }
        return dateValue;
      });
      const app = new Vue({
        el: "#app",
        data() {
          return {
            date: new Date(),
          };
        },
        computed: {
          dateVal: {
            get() {
              // eslint-disable-next-line no-extra-boolean-cast
              if (!!this.date) return moment(this.date, "MMDDYYYY").format("L");
              return this.date;
            },
            set(value) {
              this.date = moment(value, "MMDDYYYY").format("L");;
            },
          },
        },
        methods: {
          onInput(e) {
            this.dateVal = this.$options.filters.formatDate(e.target.value);
          },
        },
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <div id="app">
      <input
        type="text"
        v-model.lazy="dateVal"
        maxlength="10"
      />
    </div>

Answer 1

你可以使用v-mask

<input
    v-mask="'##/##/####'"
    type="text"
    v-model.lazy="dateVal"
    maxlength="10"
  />