亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年11月03日 15:21:41   作者：小李的代碼經(jīng)銷商  
在vue項目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

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

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

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

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

2、使用 element-ui 的 InputNumber 計數(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實現(xiàn)輸入框只允許輸入數(shù)字的文章就介紹到這了,更多相關(guān)vue輸入框只允許輸入數(shù)字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論