vue填空题 多格输入框 代码

以下是一个简单的多格输入框的 Vue 代码示例：

<template>
  <div>
    <div v-for="(item, index) in inputArr" :key="index">
      <input type="text" v-model="item.value" :maxlength="1" @input="handleInput(index)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputArr: [
        { value: '' },
        { value: '' },
        { value: '' },
        { value: '' }
        // 可以根据需求添加更多的格子
      ]
    };
  },
  methods: {
    handleInput(index) {
      if (index !== this.inputArr.length - 1 && this.inputArr[index].value) {
        this.$refs['input' + (index + 1)][0].focus();
      }
    }
  }
};
</script>

使用 `v-for` 循环生成多个输入框，限制每个输入框只能输入一个字符，同时监听 `@input` 事件，当输入框有内容时，自动聚焦到下一个输入框。