vue2实现六位数支付密码

实现六位数支付密码可以通过以下步骤：

1. 创建一个6个输入框的组件，并用v-model绑定一个数组，数组的长度为6。

2. 给每个输入框添加一个监听事件，当输入框的值改变时，触发事件将输入框的值赋值给对应的数组元素。

3. 在监听事件中，判断数组的长度是否为6，如果是，将数组的元素拼接成一个字符串，作为支付密码。

4. 在组件中添加一个密码输入框，用于用户确认支付密码。

5. 在确认支付密码时，将用户输入的密码与第一次输入的密码进行比较，如果一致，支付成功，否则提示用户重新输入。

6. 如果用户重新输入支付密码，则重置所有输入框的值和数组的长度。

下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(item, index) in inputList" :key="index" class="input-box">
      <input type="text" v-model="inputList[index]" @input="handleInput(index)">
    </div>
    <div class="input-box">
      <input type="text" v-model="confirmPwd" placeholder="请确认支付密码" @blur="handleConfirm">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputList: [],
      confirmPwd: ''
    }
  },
  methods: {
    handleInput(index) {
      if (this.inputList[index].length === 1) {
        if (this.inputList.length < 6) {
          this.inputList.push('')
        }
      }
    },
    handleConfirm() {
      if (this.inputList.length === 6) {
        const password = this.inputList.join('')
        if (password === this.confirmPwd) {
          console.log('支付成功')
        } else {
          alert('两次输入的密码不一致，请重新输入')
          this.inputList = []
          this.confirmPwd = ''
        }
      } else {
        alert('请输入完整的支付密码')
      }
    }
  }
}
</script>

<style>
.input-box {
  display: inline-block;
  margin-right: 10px;
}
input[type="text"] {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>