Question

希望有人可以帮助我！我已经制定了一个包含Jasny Bootstrap插件的指令，更具体地说是输入掩码的东西，一切顺利！

现在我已经支持自定义过滤器来格式化日期字段！

我从后端应用程序收到的日期格式为YYY-MM-DD，我必须在视图中显示为DD / MM / YYYY ...我已尝试executions但它没有＃＆＃ 39;正常工作！

JS

v-model="date | myDate"

HTML

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',
  }
});

如果有人感兴趣，可以JSBin！

提前致谢！

编辑：更好地解释我的期望=）

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

Answer 1

我理解你要做的是什么，但是，由于使用v-model时双向绑定，最好只是在从服务器接收日期时格式化日期，然后使用它与您的前端应用程序中所需的格式（'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');
        }
    }
  });

这对我有用，希望有所帮助。

这是一个小提琴：

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

语法UPDATE：

    ...
    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')
        }
    }
  })

Answer 2

当我想要大写输入值时，我遇到了类似的问题。

这就是我最终做的事情：

// create a directive to transform the model value
Vue.directive('uppercase', {
  twoWay: true, // this transformation applies back to the vm
  bind: function () {
    this.handler = function () {
      this.set(this.el.value.toUpperCase());
    }.bind(this);
    this.el.addEventListener('input', this.handler);
  },
  unbind: function () {
    this.el.removeEventListener('input', this.handler);
  }
});

然后我可以在带有v-model的输入字段上使用此指令。

<input type="text" v-model="someData" v-uppercase="someData">

现在，每当我输入此字段或更改someData时，该值都会转换为大写。

这基本上和我希望v-model="someData | uppercase"做的一样。但是，当然，你不能这样做。

总结：制作一个转换数据的指令，而不是过滤器。

Answer 3

最初获得值时，请调整它以适合输入。我在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,"/");
}

在返回数据库的过程中，您可能需要做类似的事情。

Answer 4

这是我使用watch回调为v模型实现vue过滤器的方式，这不会在加载时更新值。

Vue.filter('uppercase', function (value) {
    return value.toUpperCase();
});

html：

<input type="text" v-model="someData">

监视回调：

watch:{
   someData(val) {
       this.someData = this.$options.filters.uppercase(val);
    },
}

Answer 5

我发现我可以使用普通组件v-bind:value / v-on:input来过滤输入内容，如果我只是调用{{1 }}发出过滤后的值后：

Vue组件：

data

组件HTML（在输入数据时对其进行过滤）：

watch

使用组件：

$forceUpdate()

Answer 6

转到main.js并添加以下代码：

self.tablex.heading('#0',text='Text0')
self.tablex.heading('#1',text='Text1')
self.tablex.heading('#2',text='Text2')
self.tablex.heading('#3',text='Text3')

在您的HTML中执行以下操作：

import moment from 'moment'
Vue.filter('myDate', function (value) {
    if (value) {
        return moment(String(value)).format('dd/mm/yyyy')
    }
});

因此，我们在v-bind上面使用了绑定值和@input事件处理程序以具有v-model功能。

Answer 7

模板

<input type="text" v-model="date" @change="onDateChange">

组件

  methods: {
    onDateChange(event) {
      this.myDate = event.target.value
    }
    getFormatedDate(date) {
     return '2020/08/19'
    }
  },
  computed: {
    date() {
      return this.getFormatedDate(this.myDate)
    }
  }

Answer 8

我想提供一个替代方案，使用来自 Vue 指令的钩子更新

export default {
  data() {
    return {
      someData: '',
    }
  },
  directives: {
    lowercase: {
      update(el) {
        el.value = el.value.toLowerCase()
      },
    },
    uppercase: {
      update(el) {
        el.value = el.value.toUpperCase()
      },
    },
    capitalize: {
      update(el) {
        const lowerCase = el.value.toLowerCase()
        el.value = lowerCase.charAt(0).toUpperCase() + lowerCase.slice(1)
      },
    },
  },
}

或

Vue.directive('lowercase', {
  update(el) {
    el.value = el.value.toLowerCase()
  }
})
Vue.directive('uppercase', {
  update(el) {
    el.value = el.value.toUpperCase()
  }
})
Vue.directive('capitalize', {
  update(el) {
    const lowerCase = el.value.toLowerCase()
    el.value = lowerCase.charAt(0).toUpperCase() + lowerCase.slice(1)
  }
})

<input type="text" v-model="someData" v-capitalize />

Vue js在输入字段中对v模型应用过滤器

8 个答案: