用Vue3+ts+vite 并且使用 <script lang="ts" setup>语法 写一个输入6位验证码的6个输入框

好的，以下是实现方式：

<template>
  <div>
    <input v-model.trim="code[0]" maxlength="1" />
    <input v-model.trim="code[1]" maxlength="1" />
    <input v-model.trim="code[2]" maxlength="1" />
    <input v-model.trim="code[3]" maxlength="1" />
    <input v-model.trim="code[4]" maxlength="1" />
    <input v-model.trim="code[5]" maxlength="1" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  const code = ref<string[]>(['', '', '', '', '', '']);

  watch(code, (val) => {
    const fullCode = val.join('');
    if (fullCode.length === 6) {
      console.log('输入完毕，验证码为：', fullCode);
    }
  });
</script>

解释一下：

1. 使用 `v-model.trim` 绑定每个输入框的值，同时设置 `maxlength` 属性为 1，确保输入框只能输入一个字符。

2. 使用 `ref` 定义一个 `code` 变量，它是一个字符串数组，用来保存每个输入框的值。

3. 使用 `watch` 监听 `code` 变量的变化，当 `code` 中的每个元素都有值时，即长度为 6 时，打印出完整的验证码。

注意事项：

1. `v-model` 双向绑定需要在模板中使用，不能在 `setup` 中使用。

2. `watch` 需要在 `setup` 中使用，不能在模板中使用。

3. `ref` 可以在模板和 `setup` 中使用。