Vue js在输入字段中对v模型应用过滤器 [英] Vue js apply filter on v-model in an input field
问题描述
现在我已经制作了一个自定义过滤器日期字段！
我从后端应用程序收到的日期格式是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
<标签>日期和LT; /标签>
< input type =textclass =form-controlv-input-mask mask =99/99/9999v-model =date>
< p> {{date | myDate'dd / mm / yyyy'}}< / p>
有一个 JSBin 如果有人感兴趣的话！
提前致谢！
编辑：更好地解释我的期望=）
当页面首次加载输入时收到2015-06-的值26我希望将这个值显示为DD / MM / YYYY所以26/06/2015！它只在我开始输入东西后才能正常工作！
我明白你要做什么，但是，因为这两个在使用v-model时绑定方式，最好只在从服务器接收日期时格式化日期，然后在前端应用程序中使用所需格式（'DD / MM / YYYY'）。
将数据发送回后端时，只需将其格式化为所需的服务器格式（'YYYY-MM-DD' ）。
在您的Vue应用中，工作流程如下：
new Vue（{
el：'body'，
data：{
date：null，
}，
方法：{
getDataFromServer：function（）{
//从服务器获取数据的Ajax调用
//让我们假装收到的日期数据保存在变量中（serverDate） ）
//我们将为此ex硬编码。
var serverDate ='2015-06-26';
//格式化并保存到vue数据属性
this.date = this.frontEndDateFormat（serverDate）;
}，
saveDataToServer：function（）{
//在将数据发送回服务器之前先格式化数据
var serverDate = this.backE ndDateFormat（this.date）;
// Ajax调用发送格式化数据（serverDate）
}，
frontEndDateFormat：函数（日期）{
返回时刻（日期，'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/
语法更新：
...
方法：{
getDataFromServer（）{
//从服务器获取数据的Ajax调用
//让我们假装收到的日期数据保存在变量中（serverDate）
//我们将为此ex硬编码。
const serverDate ='2015-06-26'
//格式化并保存到vue数据属性
this.date = this.frontEndDateFormat（serverDate）
}，
saveDataToServer（）{
//在将数据发送回服务器之前先格式化数据
const serverDate = this.backEndDateFormat（this.date）
// Ajax调用发送格式化数据（serverDate）
}，
frontEndDateFormat（日期）{
返回时刻（日期，'YYYY-MM-DD'）。格式（'DD / MM / YYYY' ）
}，
backEndDateFormat（日期）{
返回时刻（日期，'DD / MM / YYYY'）。格式（'YYYY-MM-DD'）
}
}
}）
Hope someone can help me! I have made a directive wrapping the Jasny Bootstrap Plugin more specifically the input-mask thing and everything goes well!
Now I have made a custom filter supported by moment to format the date field!
The date format that I receive from my backend application is YYY-MM-DD and I must show on the view as DD/MM/YYYY... I've tried v-model="date | myDate" but it didn't work properly!
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>
There is the JSBin if somebody's interested!
Thanks in advance!
EDIT: Explaining better what I expect =)
When the page first load the input receive the value of 2015-06-26 and I would like to show that value as DD/MM/YYYY so 26/06/2015! It works properly only after I start typing something!
I understand what you are trying to do, however, because of the two way binding when using v-model, it may be better to just format the date as you receive it from the server, and then, use it with the desired format in your front-end app ('DD/MM/YYYY').
When sending the data back to the back-end, you just format it back to the desired server format ('YYYY-MM-DD').
In your Vue app, the work flow would be something like this:
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');
}
}
});
This works well for me, hope it helps.
Here is a fiddle for it:
https://jsfiddle.net/crabbly/xoLwkog9/
Syntax 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')
}
}
})
这篇关于Vue js在输入字段中对v模型应用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
