信用卡隐藏代码，以及价值传递问题

Question

当输入四位数字时，添加&quot-&"；，返回｛｛cardNumber｝｝变成四个数字加一个空白。例如：输入：1234-22xx-xxxx-4234时，显示：1234 22xx-xxxx4234。

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

目前，添加"-"以及"已写入，可执行

请帮助大家，谢谢

<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

这个问题有很多格式化信用卡号的解决方案。我喜欢第一个答案中的HTML5建议。

如果您选择了其中一个javascript答案，那么只需将函数放入computed中即可。将原始卡号放在模型中的某个位置，然后将计算出的卡号指向原始卡号。这有道理吗？