VeeでElementUIを組み合わせた実装:入力ボックスに正の整数しか入力できないことを制限する

VeeでElementUIを組み合わせた実装:入力ボックスに正の整数しか入力できないことを制限する ， (*^▽^*)
inputでは小数と負数の入力は禁止されています(正の整数のみ入力可能)
作り方1:禁止ボタンを利用する方法は、主にマイナス記号及び小数点の押下を禁止することによって達成される

まずkeyup(キーボード押下)イベントをリスニングします.elementUI上のinputコンポーネントのリスニングイベントはこのイベントがないので、エラーが発生する可能性があります.vueイベントの修飾子を追加する必要があります.nativeは、原生事件を表す意味です.

その後、$eventオブジェクトを転送して、オリジナルのDOM(トリガイベント自体と簡単に理解できる)

を取得します.

次はmethodsにこの関数を書きます

具体的な意味はすでに上に书いてありますが、キーを押すと、keynumとkeycharが表す文字やキーボードコードを自分でポップアップすることができます.どの判断でもいいので、キーボードコードを使って判断して判断に入るとインタラクティブになります.ユーザーが入力したデータをクリアすることを選びました.
やり方2:正則を利用して小数点と負数を避ける

ここではelementUIのイベントを使用しています.フォーカスを失ったときにイベントをトリガーします.同じように$eventパラメータ

に入力します.

methodsで作成された関数

ここで使われている正則の意味は(正則的な大物は省略したり、弟の不足点を見たりすることができます):まず、冒頭の^と末尾の$を見てみましょう.ここでは、一致文字列の先頭と一致文字列の末尾を表していますが、[1-9]は1-9の数字を表しているので、負数と小数をフィルタします.また、冒頭は1で始まる必要があります.後ろは0-9で終わる数字に一致します.*は0回以上、つまり終わりを制限しない数字を表します.合わせて、私たちは1-9の数から始まる数字に一致し、0-9の数で終わる数字に一致します.最後に、私たちが定義した正則に合致すれば、エラーを提示する必要はありません.合致しなければ、エラーを提示し、データを空にします.
以下の内容は後に追加されます.
方法3:ES6 includesでふるい落とす.および-
1.入力ボックスの値を取得し、入力ボックスの内容を取得する

var inputText = document.querySelector('#inputText')

    inputText.addEventListener('input', function(){
        if( this.value.includes('.')){
            console.log('       ')
        }else if(this.value.includes('-')){
            console.log('      ')
        }else{
            console.log('  ')
        }
    })

方法4:正則マッチングを利用する.または-
メソッドはメソッド2と同じですが、正規表現は/^\d+\.\d$/です.
2つの例を添付します.

let regx = /^\d+\.\d+$/;
let num_two = 1.252;
const newNum_two = regx.test(num_two)
console.log(newNum_two)

説明:

`/^d+`：          +：       
`\.`：       
`\d+$` ：                  

let regx_two = /^\-\d\.?\d*$/;
let num_three = -2.53;
const newNum_three = regx_two.test(num_three)
console.log(newNum_three)

説明:

`/^\-`：  -     
`\d`：         
`\.`：        0   1   .
`\d*`         0    （             -2  ，     ）

OK分かち合いはこれで終わります.もし私が後で何か方法があれば、またみんなに分かち合いに来ます.