一、自定義指令
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)
},
}