使用vue3写一个大小写转换

好的，以下是使用 Vue 3 实现大小写转换的代码：

<template>
  <div>
    <input v-model="text" type="text" placeholder="请输入文本" />
    <button @click="convertText">转换大小写</button>
    <div>{{ convertedText }}</div>
  </div>
</template>

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

export default {
  setup() {
    const text = ref('');
    const convertedText = ref('');

    const convertText = () => {
      if (text.value === '') {
        convertedText.value = '';
        return;
      }
      const uppercaseText = text.value.toUpperCase();
      const lowercaseText = text.value.toLowerCase();
      convertedText.value =
        text.value === uppercaseText ? lowercaseText : uppercaseText;
    };

    return {
      text,
      convertedText,
      convertText,
    };
  },
};
</script>

在这个组件中，我们使用 `ref` 创建了两个响应式变量 `text` 和 `convertedText`，分别用于存储用户输入的文本和转换后的文本。在 `convertText` 方法中，我们首先判断用户是否输入了文本，如果没有则直接将转换后的文本置为空字符串。如果用户输入了文本，则通过 `toUpperCase` 和 `toLowerCase` 方法将原始文本转换为大写和小写形式，并根据用户输入的文本和转换后的文本是否相等来判断应该使用哪种形式的文本。最后，我们将转换后的文本赋值给 `convertedText` 变量，并在模板中显示出来。