Question

更新说明

当用户离开该字段时，我需要将格式化的值设置回字段 - 这就是我使用过滤器的原因所以当用户输入10.1并离开该字段时，该字段将自动更新为显示10.10

很抱歉，如果我之前没有澄清

**你或者有没有人有任何想法？

伯特解决了！

我分叉了他的CodePen并添加了一个空值检查，所以我只能显示一个空白（我自己的总线要求）：

Forked Example

我有一个我从1.0过滤器转换的以下计算函数。目的：输入的格式为输入格式为nnnn.nn格式，以便输入10.10将返回10.10而不是非格式化10.1。

我想为用户动态格式化（他们的请求不是我的）

    computed:
    {
        decimalComputed:
        {
            get: function (value)
            {
                var newFloat = parseFloat(value);
                return newFloat.toFixed(2);
            },
            set: function (value)
            {
                var newFloat = parseFloat(value);
                return newFloat.toFixed(2);
            }
        },
    },

问题是，当我尝试将它用作函数时，我得到一个错误告诉我decimalComputed不是一个函数所以我将它设置为html中的属性但是没有格式化。

以下是我如何致电的示例：

<input :id="'cash_tips-' + index" type="text" 
    v-model="decimalComputed = tip.cash_tips" pattern="\d*" number />

如果我不使用计算机，我不在乎我只需要解决问题：格式化值，因为用户输入后

欢迎任何帮助。

我会在几个小时内回顾一下需要更新

谢谢！

Answer 1

在这种情况下，我可能会使用一个小组件。

<formatted-number v-model="tip.cash_tips" :decimals="2"></formatted-number>

然后在你的模板中使用它

Vue.component("formatted-number",{
  props:["value", "decimals"],
  data(){
    return {
      internalValue: this.format(this.value)
    }
  },
  methods:{
    format(value){ return parseFloat(value).toFixed(this.decimals || 2);},
    onChange(){this.$emit('input', this.format(this.internalValue))},
    onBlur(){this.internalValue = this.format(this.internalValue)}
  },
  template:'<input type="text" v-model="internalValue" @input="onChange" @blur="onBlur" />'
})

Example

发表评论编辑

long GetDateTimeMS (int yr, int month, int day, int hr, int min)
{
    Calendar c = Calendar.GetInstance (Java.Util.TimeZone.Default);

    c.Set (Calendar.DayOfMonth, day);
    c.Set (Calendar.HourOfDay, hr);
    c.Set (Calendar.Minute, min);
    c.Set (Calendar.Month, month);
    c.Set (Calendar.Year, yr);

    return c.TimeInMillis;
}

Vue.Js过滤器计算 - 如何使用？

1 个答案:

发表评论编辑