快捷導(dǎo)航

vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字

更新時(shí)間：2023年11月03日 15:21:41 作者：小李的代碼經(jīng)銷商

在vue項(xiàng)目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字

在vue項(xiàng)目中，輸入框只允許輸入數(shù)字，現(xiàn)將自己使用的一種方法記錄，以供參考！

1、行內(nèi)插入 οninput="value=value.replace(/[^0-9.]/g,'')"

<el-input v-model.number="ruleForm.sort" placeholder="請(qǐng)輸入數(shù)字(限數(shù)字)" oninput="value=value.replace(/[^0-9.]/g,'')" />

2、使用 element-ui 的 InputNumber 計(jì)數(shù)器

<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>

如果不需要控制按鈕，設(shè)置controls為false即可

VUE html里的文本框只允許輸入數(shù)字的兩種方法

方法一、input 事件 + 數(shù)字正則表達(dá)式

<template>
  <a-input v-model:value="num" @input="handInput" />
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    name: "OnlyNum",
    props: {},
    emits: [],
    setup() {
      const num = ref("");
      function handInput(e) {
        num.value = e.target.value.replace(/[^0-9]/g, "");
      }
      return { num, handInput };
    },
  });
</script>
<style scoped></style>

方法二、鍵盤按鍵事件 keydown

<template>
  <a-input v-model:value="num" @keydown="handKeydown" />
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    name: "OnlyNum",
    props: {},
    emits: [],
    setup() {
      const num = ref("");
      function handKeydown(e) {
        let _code = e.keyCode;
        // 只允許數(shù)字鍵和刪除鍵
        if ((_code >= 48 && _code <= 57) || _code === 8) {
        } else {
          e.preventDefault();
        }
      }
      return { num, handKeydown };
    },
  });
</script>
<style scoped></style>

到此這篇關(guān)于vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字的文章就介紹到這了,更多相關(guān)vue輸入框只允許輸入數(shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3頁面數(shù)據(jù)加載延遲的問題分析和解決方法
在?Vue?3?的項(xiàng)目中,當(dāng)我們使用響應(yīng)式數(shù)據(jù)（如?ref?或?computed）來管理頁面狀態(tài)時(shí),可能會(huì)遇到由于接口數(shù)據(jù)加載延遲,導(dǎo)致頁面初始渲染時(shí)數(shù)據(jù)尚未獲取完成的問題,本文針對(duì)此問題簡(jiǎn)單分析了原因和解決方法,需要的朋友可以參考下
2024-11-11
vue3.0實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue-better-scroll 的使用實(shí)例代碼詳解
這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
詳解Vue如何自定義hooks(組合式)函數(shù)
這篇文章主要為大家詳細(xì)介紹了在Vue中如何實(shí)現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
vue3父子組件相互調(diào)用方法詳解
在vue3項(xiàng)目開發(fā)中,我們常常會(huì)遇到父子組件相互調(diào)用的場(chǎng)景,下面主要以setup語法糖格式詳細(xì)聊聊父子組件那些事兒,并通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-05-05
Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能
這篇文章主要介紹了Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能,本通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-08-08
vue綁定class的三種方法
這篇文章主要介紹了vue綁定class的三種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能
這篇文章主要介紹了vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能,可以實(shí)現(xiàn)單個(gè)拖拽、雙擊添加、按住ctrl鍵實(shí)現(xiàn)多個(gè)添加,或者按住shift鍵實(shí)現(xiàn)范圍添加,添加到框中的數(shù)據(jù),還能拖拽排序,需要的朋友可以參考下
2024-02-02
vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-05-05