vue3动态命名变量

在 Vue.js 3 中，可以使用 ES6 的计算属性语法来实现动态命名变量。具体步骤如下：

1. 在模板中使用双大括号绑定动态变量名：

<template>
  <div>
    <input v-model="value" />
    <button @click="save">Save</button>
  </div>
</template>

2. 在计算属性中动态设置变量名：

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

export default {
  setup() {
    const value = ref('');
    const fieldName = ref('name');

    const formData = computed(() => ({
      [fieldName.value]: value.value,
    }));

    function save() {
      console.log(formData.value);
    }

    return {
      value,
      fieldName,
      save,
    };
  },
};
</script>

在上述代码中，我们使用 `fieldName` 变量动态设置了 `formData` 对象中的属性名。在模板中修改 `fieldName` 变量的值，即可动态修改属性名。