当过滤器用于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)) } });
当第一次data赋值, 过滤器不会将过滤以后的新值回填, 当从新输入input内容, model修改时, data被赋予过滤以后的值.input