vue自定義指令(過濾器/函數(shù))保留小數(shù)點(diǎn)后兩位

一、自定義指令
1.在mainjs中寫入

Vue.directive("init", {
    inserted: function(el) {
        el.addEventListener("keypress", function(e) {
            var that = this
                // 通過正則過濾小數(shù)點(diǎn)后兩位
            e.target.value = (e.target.value.match(/^\d*(.?\d{0,1})/g)[0]) || null
        })
    }
})

2.使用方法

<input type="number" v-model.lazy="maxprice" v-init placeholder="價(jià)格" />

或者
1.在mainjs中寫入

Vue.directive('enterNumber', {
    bind: function(el, { value = 3 }) { // value 保留幾位小數(shù)
        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 type="text" v-model.lazy="phones" v-enter-number="0" />  <!-- 無小數(shù)點(diǎn) -->
        <input type="text" v-model.lazy="phones" v-enter-number />  <!-- 保留三位小數(shù)點(diǎn)  --> 

二、過濾器 (全局?jǐn)?shù)據(jù),不適用于input 的v-model)
1.在mainjs中注冊(cè)

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) {
    // 截取當(dāng)前數(shù)據(jù)到小數(shù)點(diǎn)后三位
    const itemVal = Number(value).toFixed(3)
    if (itemVal === 'NaN') {
        return '0.00'
    }
    const realVal = itemVal.substring(0, itemVal.length - 1)
    return realVal
}

三、使用方法

<div>{{maxprice | keepTwo}}</div>

三、函數(shù) 保留兩位小數(shù),不夠自動(dòng)用零補(bǔ)齊
1.在mainjs中引入注冊(cè)

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

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

export function keepTwo(value) {
    // 截取當(dāng)前數(shù)據(jù)到小數(shù)點(diǎn)后三位
    const itemVal = Number(value).toFixed(3)
    if (itemVal === 'NaN') {
        return '0.00'
    }
    const realVal = itemVal.substring(0, itemVal.length - 1)
    return realVal
}

三、使用方法

 <input type="number" v-model="phone" />
 <div>{{phone}}</div>

  mounted() {
    this.foo();
  },
  methods: {
    foo() {
     this.phones= this.$keepTwo(52.68585)
    },
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容