Credit card hidden code,and Value passing problem？

Question

When entering four digits, add "-", Return {{cardNumber}} becomes four numbers plus a blank. For example: when inputting: 1234-22xx-xxxx-4234, display: 1234 22xx xxxx 4234.

The set of numbers needs to be hidden. How do I do it?

At present, adding "-" and "" is written, which is executable

Please help everyone, thank you

<div class="cardNumber">credit card number: <span>{{ cardNumber }}</span></div>
<div class="expiryDate">expiry-date: <span>{{ expiryDate }}</span></div>

<input v-model="cardNumber" type="text" class="cardNumber-input" placeholder="Please enter credit card number" autocomplete="off">

<input v-model="expiryDate" type="text" class="expiryDate-input" placeholder="MM/YY" autocomplete="off">

mounted: function () {
// XX/YY 
It is feasible to write this way at present, see if there is a better way to write it?
             document.querySelector('.expiryDate-input').oninput = function () {
                $(this).val(function(i, v)
                    {
                        var v = v.replace(/[^\d]/g, '').match(/.{1,2}/g);
                        return v ? v.join('/') : '';
                    });
            }; 

// add "blank"
document.querySelector('.cardNumber-input').oninput = function () {
                $(this).val(function(i, v)
                    {
                        var v = v.replace(/[^\d]/g, '').match(/.{1,4}/g);
                        return v ? v.join(' ') : '';
                    });
            }; 

//add "-"
document.querySelector('.cardNumber-input').oninput = function () {
                $(this).val(function(i, v)
                    {
                        var v = v.replace(/[^\d]/g, '').match(/.{1,4}/g);
                        return v ? v.join('-') : '';
                    });
            };  */

Answer 1

This question has a bunch of solutions for formatting credit card number. I like the HTML 5 suggestion in the first answer.

If you choose one of the javascript answers, then just put the function in a computed. Have the raw card number somewhere in your model, then point the computed at the raw number. Does that make sense ?