vue3实现输入框历史记录

要实现输入框的历史记录，可以借助Vue3的响应式数据和计算属性的特性。首先，在vue组件中，可以创建一个用于存储历史记录的数组，例如`history`。然后，每当用户在输入框中键入内容时，可以通过监听`input`事件来获取用户输入的值，并将其添加到`history`数组中。示例如下：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput" />
    <ul>
      <li v-for="(item, index) in history" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const history = ref([]);
    const inputValue = ref('');

    const handleInput = () => {
      if (inputValue.value) {
        history.value.push(inputValue.value);
      }
    };

    return {
      history,
      inputValue,
      handleInput,
    };
  },
};
</script>

在上面的示例中，我们通过`v-model`指令将输入框的值与`inputValue`变量双向绑定，使其能够随用户的输入而变化。当用户在输入框中键入内容时，`handleInput`方法会将输入的值添加到`history`数组中。然后，通过使用`v-for`指令遍历`history`数组，我们可以将历史记录渲染为一个列表展示出来。

这样，在用户每次输入内容时，都会将输入的值记录到历史记录中，并在页面上展示出来。用户可以通过查看历史记录来获取以前输入过的值，从而方便地选择或参考之前的输入内容。