只是为Vue.js应用程序上的付款表单创建的另一个信用卡输入组件。

安装和下载：

# NPM 
$ npm i vue-ccard --save

如何使用它：

1.使用NPM安装组件。

# NPM
$ npm i vue-ccard --save

2.导入组件。

import VueCCard from 'vue-ccard';

3.将信用卡组件添加到模板。

<template>
  <div id="app">
    <vue-c-card
      :number="cc.number"
      :holder="cc.holder"
      :exp="cc.exp"
      :cvc="cc.cvc"
      :is-typing-cvc="isTypingCvc"/>
    <label for="number">Number</label>
    <input type="text" v-model="cc.number" id="number">
    <label for="holder">Holder</label>
    <input type="text" v-model="cc.holder" id="holder">
    <label for="exp">Expiration Date</label>
    <input type="text" v-model="cc.exp" id="exp">
    <label for="cvc">CVC</label>
    <input type="text" v-model="cc.cvc"
      @focus="isTypingCvc = true"
      @blur="isTypingCvc = false" id="cvc">
  </div>
</template>

4.注册组件。

export default {
  name: 'app',
  components: {
    VueCCard,
  },
  data() {
    return {
      isTypingCvc: false,
      cc: {
        number: '',
        holder: '',
        exp: '',
        cvc: '',
      },
    };
  },
};