信用卡隐藏码，传值问题？

问题描述

输入四位数字时，加“-”，返回{{cardNumber}}变成四位数字加一个空格。例如：输入：1234-22xx-xxxx-4234时，显示：1234 22xx xxxx 4234。

需要隐藏这组数字。我该怎么做？

目前写的是加“-”和“”，是可执行的

请大家帮忙，谢谢

<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,4}/g);
                        return v ? v.join(' ') : '';
                    });
            }; 

//add "-"
document.querySelector('.cardNumber-input').oninput = function () {
                $(this).val(function(i,4}/g);
                        return v ? v.join('-') : '';
                    });
            };  */

解决方法

This question 有很多格式化信用卡号的解决方案。我喜欢第一个答案中的 HTML 5 建议。

如果您选择 javascript 答案之一，则只需将该函数放在 computed 中。将原始卡号放在模型中的某处，然后将计算结果指向原始卡号。有意义吗？

javascript vue.js