vue3 switch case

在Vue 3中，可以使用`<template>`标签中的`v-if`和`v-else-if`来实现类似于switch case的功能。下面是一个示例：

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <button @click="handleClick">Submit</button>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      result: ''
    };
  },
  methods: {
    handleClick() {
      if (this.inputValue === 'option1') {
        this.result = 'Option 1 selected';
      } else if (this.inputValue === 'option2') {
        this.result = 'Option 2 selected';
      } else if (this.inputValue === 'option3') {
        this.result = 'Option 3 selected';
      } else {
        this.result = 'Invalid option';
      }
    }
  }
};
</script>

在上面的示例中，我们使用了一个输入框和一个按钮来触发处理点击事件。根据输入的值，我们使用`v-if`和`v-else-if`来设置结果文本。在Vue实例中，我们定义了一个data属性来保存输入值和结果，并在方法中根据输入值设置结果。然后，将结果在模板中显示出来。

请注意，在Vue 3中，`v-if`和`v-else-if`具有更好的性能，因为它们使用了更高效的条件渲染策略。

希望这可以帮助到您！如果您有任何其他问题，请随时问我。