vue3switch case怎么用

在 Vue 3 中，我们可以使用 `<template>` 和 `<script>` 标签来实现类似于 switch case 的功能。以下是一个示例代码，演示了如何在 Vue 3 中使用 switch case：

<template>
  <div>
    <button @click="handleClick(1)">Option 1</button>
    <button @click="handleClick(2)">Option 2</button>
    <button @click="handleClick(3)">Option 3</button>
  </div>
</template>

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

export default {
  setup() {
    const selectedOption = ref('');

    function handleClick(option) {
      switch (option) {
        case 1:
          selectedOption.value = 'You selected Option 1';
          break;

        case 2:
          selectedOption.value = 'You selected Option 2';
          break;

        case 3:
          selectedOption.value = 'You selected Option 3';
          break;

        default:
          selectedOption.value = 'Invalid option';
      }
    }

    return {
      selectedOption,
      handleClick
    };
  }
}
</script>

在上述代码中，我们使用了 Vue 3 的 Composition API，其中通过 `ref` 创建了一个响应式的变量 `selectedOption`，用于保存选中的选项。`handleClick` 函数根据不同的选项值执行不同的操作，并更新 `selectedOption` 的值。在模板中，我们通过按钮的点击事件调用 `handleClick` 函数来触发切换操作，并根据 `selectedOption` 显示对应的提示信息。

希望以上代码对你有所帮助！如果还有其他问题，请随时提问。