vuejs1.x中的过滤器高级用法

当过滤器用于model时, 须要考虑回填的现象.code

默认状况下, 过滤以后的新值会回填到data中, 有时后咱们须要对回填的值作处理,参考如下代码(引用自官方文档):文档

Vue.filter('currencyDisplay', {
  // model -> view
  // 在更新 `<input>` 元素以前格式化值
  read: function(val) {
    return '$'+val.toFixed(2)
  },
  // view -> model
  // 在写回数据以前格式化值
  write: function(val, oldVal) {
    var number = +val.replace(/[^\d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
});

发现的问题(疑似bug):

当第一次data赋值, 过滤器不会将过滤以后的新值回填, 当从新输入input内容, model修改时, data被赋予过滤以后的值.input

相关文章
相关标签/搜索