javascript - Vue js 在输入字段中对 v-model 应用过滤器

Question

希望有人能帮助我!我已经制定了一个指令来包装 Jasny Bootstrap 插件，更具体地说是输入掩码，一切顺利!

现在我做了一个moment支持的自定义过滤器来格式化日期字段!

我从后端应用程序收到的日期格式是 YYY-MM-DD，我必须在 View 中显示为 DD/MM/YYYY...我试过 v-model="date | myDate " 但它没有正常工作!

JS

Vue.directive('input-mask', {
  params: ['mask'],

  bind: function() {
    $(this.el).inputmask({
      mask: this.params.mask
    });

  },
});

Vue.filter('my-date', function(value, formatString) {

  if (value != undefined)
    return '';

  if (formatString != undefined)
    return moment(value).format(formatString);

  return moment(value).format('DD/MM/YYYY');

});

var vm = new Vue({
  el: 'body',
  data: {
    date: '2015-06-26',
  }
});

HTML

<label>Date</label>
<input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date">
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>

有 JSBin如果有人感兴趣!

提前致谢!

编辑:更好地解释我的期望 =)

当页面首次加载时，输入收到 2015-06-26 的值，我想将该值显示为 DD/MM/YYYY，所以 26/06/2015!只有在我开始输入内容后它才能正常工作!

Answer 1

我明白你想做什么，但是，由于使用 v-model 时有两种绑定(bind)方式，最好只在从服务器接收日期时格式化日期，然后将它与在您的前端应用程序中设置所需的格式 ('DD/MM/YYYY')。

将数据发送回后端时，只需将其格式化回所需的服务器格式 ('YYYY-MM-DD')。

在你的 Vue 应用程序中，工作流程是这样的:

 new Vue({
    el: 'body',
    data: {
      date: null,
    },
    methods: {
        getDataFromServer: function() {
                // Ajax call to get data from server

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it for this ex.
                var serverDate = '2015-06-26';

                // Format it and save to vue data property
                this.date = this.frontEndDateFormat(serverDate);
        },
        saveDataToServer: function() {
            // Format data first before sending it back to server
            var serverDate = this.backEndDateFormat(this.date);

            // Ajax call sending formatted data (serverDate)
        },
        frontEndDateFormat: function(date) {
            return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
        },
        backEndDateFormat: function(date) {
            return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD');
        }
    }
  });

这对我来说效果很好，希望对您有所帮助。

这是一个 fiddle :

https://jsfiddle.net/crabbly/xoLwkog9/

语法更新:

    ...
    methods: {
        getDataFromServer() {
                // Ajax call to get data from server

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it for this ex.
                const serverDate = '2015-06-26'

                // Format it and save to vue data property
                this.date = this.frontEndDateFormat(serverDate)
        },
        saveDataToServer() {
            // Format data first before sending it back to server
            const serverDate = this.backEndDateFormat(this.date)

            // Ajax call sending formatted data (serverDate)
        },
        frontEndDateFormat(date) {
            return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
        },
        backEndDateFormat(date) {
            return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')
        }
    }
  })