错误写法：

vue 动态设置变量 let dateTimeShow${item.name} = ref(false)

在 Vue 3 中，使用动态变量名（如 let dateTimeShow${item.name} = ref(false)）并不是一个标准的做法，因为 JavaScript 的变量名在定义时是静态的。相反，你可以使用对象来动态存储这些变量。这样可以根据 item.name 动态管理多个 ref 变量。

正确写法：

使用对象存储动态变量
你可以创建一个响应式对象来存储所有的动态变量。例如：

import { reactive, ref } from 'vue';

export default {
  setup() {
    // 示例数据
    const items = [
      { name: 'item1' },
      { name: 'item2' },
      { name: 'item3' }
    ];

    // 创建一个响应式对象来存储动态变量
    const dateTimeShow = reactive({});

    // 初始化动态变量
    items.forEach(item => {
      dateTimeShow[item.name] = ref(false);
    });

    return {
      dateTimeShow,
      items
    };
  }
};

在模板中使用

然后，你可以在模板中使用这个动态变量：

<template>
  <div>
    <div v-for="item in items" :key="item.name">
      <p>{{ item.name }}</p>
      <button @click="dateTimeShow[item.name] = !dateTimeShow[item.name]">Toggle</button>
      <p v-if="dateTimeShow[item.name]">Show DateTime for {{ item.name }}</p>
    </div>
  </div>
</template>

总结

• 动态变量：使用对象来动态管理多个 ref 变量，而不是尝试使用动态名称的变量。
• 响应式：通过 reactive 创建一个响应式对象，容纳所有动态变量。
• 操作简便：在模板中可以方便地访问和修改这些动态变量。
  通过这种方式，你可以灵活地管理多个动态变量，保持代码清晰和可维护。