vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法
更新時間：2018年06月08日 09:04:57 作者：冰格兒
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近在做一個金額查詢，驗證的時候總是出現(xiàn)很多問題，如輸入-號后，input框里是沒有了，但是在model里還是綁定了，提交的時候就會報錯，真的是讓人很是郁悶，小數(shù)點也是input框過濾掉了，但是提交的時候也會出現(xiàn)。不過經(jīng)過努力終于找到了一種解決方案，在這里``和大家分享一下下。
Vue.directive('numbers', {
bind: function (el, binding) {
console.log('ere')
},
inserted: function (el) {
// el.querySelector('input').blur(console.log('etset'))
},
update: function (el, binding, vnode, oldVnode) {
console.log('vnode', vnode)
let express = vnode.data.directives[1].expression
// let value = el.querySelector('input').value
let value = vnode.data.directives[1].value
if (typeof value === 'string') {} //在重置的時候清空
if (value.split('.').length - 1 > 1) {
value = value.replace(/\.{2,}/g, '') // 只保留第一個. 清除多余的
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
}
let repeatValue = value.replace(/[^\d.]/g, '')
// setTimeout(() => {
// el.querySelector('input').value = repeatValue
// }, 5)
setValueWithExpressionVue(vnode.context.$data, express, repeatValue)
},
componentUpdated: function () {},
unbind: function (el) {}
})
//
function setValueWithExpressionVue (currObj, expression, value) {
expression = expression.split('.')
expression.forEach(function (arg, i) {
if (i < expression.length - 1) {
currObj = currObj[arg]
} else {
currObj[arg] = value
}
})
}
放到main.js里就好了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vite項目中使用@進(jìn)行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue2升級vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實例代碼，非常不錯，具有一定的參考價借鑒價值，需要的朋友可以參考下2018-12-12
Vue實現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無法打開”的解決方法
xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下2024-01-01
vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
echarts.js 動態(tài)生成多個圖表 使用vue封裝組件操作
這篇文章主要介紹了echarts.js 動態(tài)生成多個圖表 使用vue封裝組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本文主要介紹了Vue3中使用vuex4的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02