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

相關文章
相關標籤/搜索