解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

要解决vue格式化银行卡(信用卡)每4位一个符号隔断的问题，可以遵循以下的攻略：

1. 导入格式化库

可以使用一些格式化库去帮助你实现格式化功能。在Vue.js中，我们可以使用vue-numeric-input这一库，来实现银行卡格式化功能。

导入vue-numeric-input库：

npm install vue-numeric-input --save

2. 在组件中引入库

在vue组件中引入vue-numeric-input库，使其成为组件的一部分，具体实现方法如下：

//引入模块
import VueNumericInput  from 'vue-numeric-input';

export default {
    components:{
        //注册组件
        'vue-numeric-input':VueNumericInput
    },
    data() {
        return {
            cardNo:''
        };
    }
}

3. 格式化银行卡号

在模板中使用vue-numeric-input组件，并设置合适的格式，在文本框输入银行卡号，可以实现格式化效果。

<template>
    <div>
        <vue-numeric-input
            label="银行卡号"
            v-model="cardNo"
            type="tel"
            formatter="#### #### #### ####"
            placeholder="请输入银行卡号"
        ></vue-numeric-input>
    </div>
</template>

在格式化的时候，需要注意以下几点：

• 银行卡号的位数必须是16位，如果银行卡号不足16位，则会添加空格。
• formatter属性的值为格式化规则， ####表示空格
• placeholder属性是输入框的提示信息

另一种实现方法

在Vue.js中，我们也可以使用自定义指令(vue-directive)来格式化银行卡号，具体实现步骤如下：

1. 创建vue-directive

在Vue.js中，自定义指令(vue-directive)可以帮助我们扩展模板的功能。创建自定义指令来格式化银行卡，具体代码示例如下：

Vue.directive('cardNo', {
    bind(el, binding, vnode){
        el.addEventListener('input', ()=>{
            let value = el.value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");
            vnode.context[binding.expression] = value;
            el.dispatchEvent(new Event('input'));
        });
    }
});

2. 在模板中使用自定义指令

在模板中使用自定义指令，就可以格式化银行卡号了。代码示例如下：

<template>
    <div>
        <input type="text" v-card-no="cardNo" placeholder="输入银行卡号">
    </div>
</template>

在上述代码中，我们将自定义指令命名为v-card-no，绑定数据为cardNo。

使用以上两种方式可以在Vue.js中实现银行卡号的格式化功能。