vue自定义指令（过滤器/函数）保留小数点后两位

一、自定义指令
1.在mainjs中写入

Vue.directive("init", {
    inserted: function(el) {
        el.addEventListener("keypress", function(e) {
            var that = this
                // 通过正则过滤小数点后两位
            e.target.value = (e.target.value.match(/^\d*(.?\d{0,1})/g)[0]) || null
        })
    }
})

2.使用方法

或者
1.在mainjs中写入

Vue.directive('enterNumber', {
    bind: function(el, { value = 3 }) { // value 保留几位小数
        el = el.nodeName == "INPUT" ? el : el.children[0]
        var RegStr = value == 0 ? `^[\\+\\-]?\\d+\\d{0,0}` : `^[\\+\\-]?\\d+\\.?\\d{0,${value}}`;
        el.addEventListener('change', function() {
            el.value = el.value.match(new RegExp(RegStr, 'g'));
            el.dispatchEvent(new Event('input'))
        })
    }
})

2.使用方法

二、过滤器 （全局数据，不适用于input 的v-model）
1.在mainjs中注册

import * as filters from './assets/js/filters'

Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

二、在assets/js中新建 filters.js

export function keepTwo(value) {
    // 截取当前数据到小数点后三位
    const itemVal = Number(value).toFixed(3)
    if (itemVal === 'NaN') {
        return '0.00'
    }
    const realVal = itemVal.substring(0, itemVal.length - 1)
    return realVal
}

三、使用方法

{{maxprice | keepTwo}}

三、函数 保留两位小数，不够自动用零补齐
1.在mainjs中引入注册

import { keepTwo } from './assets/js/filters'
Vue.prototype.$keepTwo = keepTwo

二、在assets/js中新建 公共js文件filters.js

export function keepTwo(value) {
    // 截取当前数据到小数点后三位
    const itemVal = Number(value).toFixed(3)
    if (itemVal === 'NaN') {
        return '0.00'
    }
    const realVal = itemVal.substring(0, itemVal.length - 1)
    return realVal
}

三、使用方法

 
 
{{phone}}

  mounted() {
    this.foo();
  },
  methods: {
    foo() {
     this.phones= this.$keepTwo(52.68585)
    },
}