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

Question

更新说明

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

对不起，如果我之前没有澄清

**您或任何人知道吗？

伯特解决了！

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

Forked Example

我有以下从 1.0 过滤器转换而来的计算函数。目的：将输入的小数金额格式化为 nnnn.nn 类型格式，以便输入 10.10 将 return 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

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

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))}
  },
  template:'<input type="text" v-model="internalValue" @input="onChange" />'
})

然后像这样在您的模板中使用它

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

Example.

Post评论编辑

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" />'
})

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

Vue.Js Filters to Computed - how to use?

javascript

number-formatting

vuejs2

Post评论编辑