Vue JS在输入字段中的v模型上应用过滤器

JavaScript

飞云小卤蛋

2020-03-12

希望可以有人帮帮我!我已经制定了一条指令,将Jasny Bootstrap插件更具体地包装在输入掩码中,一切顺利!

现在,我制作了一个受时间支持的自定义过滤器,以格式化日期字段!

我从后端应用程序收到的日期格式为YYY-MM-DD,并且必须在视图上显示为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,所以2015年6月26日!只有在我开始输入内容后,它才能正常工作!

第1187篇《Vue JS在输入字段中的v模型上应用过滤器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
SamStafan十三 2020.03.12

最初获得该值时,请对其进行调整以适合输入。我可以在ready函数中使用它,但是您也可以在数据库调用后执行此操作:

ready: function(){    
  var year = this.date.substr(0, 4);
  var monDay = this.date.substr(5,5);
  var result = monDay + "-" + year;
  this.date = result.replace(/-/g,"/");
}

您可能还必须在备份数据库的过程中执行类似的操作。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android