双向过滤器动态更新 |Vue.js

Question

如何为模型做自定义的双向过滤器，在 Vue.js 中即时更新。

文档中的以下代码示例适用于输入模糊。但我需要它在按键上工作。

Vue.filter('currencyDisplay', {
  read: function(val) {
    return '$'+val.toFixed(2)
  },
  write: function(val, oldVal) {
    var number = +val.replace(/[^d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
})

提前非常感谢任何帮助！

Answer 1

你可以使用 get 和 set 方法创建计算属性，分别

触发过滤器的read和write方法，从而将过滤器应用于 Vue 数据属性：

data() {
  return {
    foo: 0,
  }
},
computed: {
  filteredFoo: {
    get() {
      return Vue.filter('currencyDisplay').read(this.foo);
    },
    set(value) {
      this.foo = Vue.filter('currencyDisplay').write(value);
    }
  }
}

这是一个工作的小提琴。