使用菜鸟教程中vue3的监听属性写一个大小写转换

好的，我可以帮你写一个大小写转换的Vue3监听属性的示例代码。以下是示例代码：

<template>
  <div>
    <input v-model="inputText" @input="textChanged" />
    <p>转换后的文本：{{ convertedText }}</p>
  </div>
</template>

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

export default {
  name: 'CaseConverter',
  setup() {
    const inputText = ref('');
    const convertedText = ref('');

    function textChanged() {
      convertedText.value = inputText.value.toUpperCase();
    }

    return {
      inputText,
      convertedText,
      textChanged,
    };
  },
};
</script>

在上面的示例代码中，我们使用了Vue3的`ref`函数来定义了两个响应式变量：`inputText`和`convertedText`。`inputText`用来保存用户输入的文本，`convertedText`用来保存转换后的文本。

我们还定义了一个`textChanged`函数，当用户输入文本时，会触发`input`事件，该事件会调用`textChanged`函数，将`inputText`中的文本转换为大写，并将结果保存到`convertedText`中。在模板中，我们使用了`v-model`指令将用户输入的文本绑定到`inputText`变量上，并使用插值表达式`{{ convertedText }}`将转换后的文本显示出来。

你可以将这段代码复制到你的Vue3项目中，运行后即可看到大小写转换的效果。