vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法
更新時(shí)間：2018年06月08日 09:04:57 作者：冰格兒
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
最近在做一個(gè)金額查詢，驗(yàn)證的時(shí)候總是出現(xiàn)很多問(wèn)題，如輸入-號(hào)后，input框里是沒(méi)有了，但是在model里還是綁定了，提交的時(shí)候就會(huì)報(bào)錯(cuò)，真的是讓人很是郁悶，小數(shù)點(diǎn)也是input框過(guò)濾掉了，但是提交的時(shí)候也會(huì)出現(xiàn)。不過(guò)經(jīng)過(guò)努力終于找到了一種解決方案，在這里``和大家分享一下下。
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') {} //在重置的時(shí)候清空
if (value.split('.').length - 1 > 1) {
value = value.replace(/\.{2,}/g, '') // 只保留第一個(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里就好了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue基于el-table拓展之table-plus組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文通過(guò)實(shí)例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能，文章還給大家提到了vue h5項(xiàng)目調(diào)用手機(jī)攝像頭錄像并上傳的功能，需要的朋友可以參考下2018-08-08
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個(gè)核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Element?plus中el-input框回車觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法,需要的朋友可以參考下2024-03-03
vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例
今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08