switch case Vue3

在Vue.js 3.x版本中，`switch...case`结构并不是直接内置的语言特性，因为Vue本身是一个声明式、组件化的前端框架，它更倾向于通过数据驱动视图更新而非复杂的逻辑控制。然而，在处理一些条件分支逻辑时，你可以使用JavaScript的`switch...case`语句，结合计算属性（Computed）或`v-if`指令来实现类似的功能。

例如：

<template>
  <div>
    <button @click="切换语言">切换语言</button>
    <p>{{ selectedLanguage }}</p>
  </div>
</template>

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

const languages = ['English', 'French', 'Spanish'];
const selectedLanguage = ref('');

function switchLanguage() {
  switch (selectedLanguage.value) {
    case 'English':
      selectedLanguage.value = 'French';
      break;
    case 'French':
      selectedLanguage.value = 'Spanish';
      break;
    case 'Spanish':
      selectedLanguage.value = 'English';
      break;
    default:
      // 默认或未知情况处理
  }
}
</script>

在这个例子中，当你点击按钮时，`switchLanguage`函数会根据当前选中的语言值进行改变。然后，`selectedLanguage`这个响应式的变量会在模板中显示相应的语言名称。