element el-input directive數(shù)字進行控制
更新時間：2018年10月11日 14:19:15 作者：乖摸摸頭
本文介紹了vue使用directive 進行控制的方法，使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點，有需要小數(shù)點的，就有一定的參考價值，有興趣的可以了解一下
使用自定義指令格式化el-input
背景
使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點，有需要小數(shù)點的
使用vue directive 進行控制
開發(fā)
頁面使用方式 v-numberInt:0="item.first_fee" 0為保留幾位小數(shù)
<tr v-for="(item,index) in form.valuation_rules" :key="index">
<td class="center" >
<el-input v-if="form.valuation_type==1" v-numberInt:0="item.first_fee" v-model.trim="item.first_amount"></el-input>
<el-input v-else v-model.trim="item.first_amount" v-numberInt:2="item.first_fee"></el-input>
</td>
<td class="center">
<el-input v-model.trim="item.first_fee" v-numberInt:2="item.first_fee"></el-input> </td>
<td class="center"> {{item.additional_amount}}
</td>
<td class="center">
<el-input v-model.trim="item.additional_fee" v-numberInt:2="item.additional_fee"></el-input>
</td>
</tr>
因為用的是element 的el-input ，組件input外層包著一層div所以要使用const element = el.getElementsByTagName('input')[0]獲取 input對其監(jiān)聽失焦 當輸入的不是數(shù)字時，失焦后會變成0，沒有使用directive update方法，比較簡單directives.js
directives.js
Vue.directive('numberInt', { bind: function(el, binding, vnode) {
const element = el.getElementsByTagName('input')[0]
const len = binding.arg // 初始化設置
element.value = Number(element.value ).toFixed(len) // 失焦時候格式化
element.addEventListener('blur', function() {
if (isNaN(element.value)) {
vnode.data.model.callback(0)
} else {
vnode.data.model.callback(Number(element.value).toFixed(len))
}
})
}})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了在vue中實現(xiàn)虛擬列表組件，解決長列表性能問題,本文給大家分享實現(xiàn)思路及實例代碼，需要的朋友可以參考下2022-07-07
Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法
這篇文章主要介紹了解決VUE動態(tài)加載圖片在跨域時無法顯示的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
本文主要介紹了Vue中tab欄切換的簡單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了淺談vue首屏加載優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效
Vue.js中的watch選項用于監(jiān)聽Vue實例上某個特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關于Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue輪播圖插件vue-awesome-swiper，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本文通過實例代碼給大家介紹了vue2.0實現(xiàn)前端星星評分功能組件，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
本文主要介紹了element前端實現(xiàn)壓縮圖片的功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應用程序中的一個重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關鍵字，本文我們將介紹如何在Vue中使用詞云庫進行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06