vue3中点击一个按钮，显示三个不同的内容，第一次点击，显示文字一，第二次点击，文字一消失，显示文字二，第三次点击，文字二消失，显示文字三

好的，针对您的问题，可以使用Vue中的v-if和v-else指令来实现。具体实现方法如下：

1.在Vue组件中定义三个变量，用于存储文字一、文字二、文字三的状态，初始状态均为false：

data() {
  return {
    showText1: false,
    showText2: false,
    showText3: false
  };
}

2.在按钮上绑定一个点击事件，每次点击时通过改变变量状态来实现文本的显示和隐藏：

<button @click="toggleText">{{ buttonText }}</button>

methods: {
  toggleText() {
    if (this.showText1) {
      this.showText1 = false;
      this.showText2 = true;
      this.buttonText = '显示文字二';
    } else if (this.showText2) {
      this.showText2 = false;
      this.showText3 = true;
      this.buttonText = '显示文字三';
    } else if (this.showText3) {
      this.showText3 = false;
      this.buttonText = '显示文字一';
    } else {
      this.showText1 = true;
      this.buttonText = '显示文字二';
    }
  }
},
computed: {
  buttonText() {
    if (this.showText1) {
      return '显示文字二';
    } else if (this.showText2) {
      return '显示文字三';
    } else if (this.showText3) {
      return '显示文字一';
    } else {
      return '显示文字一';
    }
  }
}

3.在模板中使用v-if和v-else指令来显示和隐藏文本：

<p v-if="showText1">文字一</p>
<p v-else-if="showText2">文字二</p>
<p v-else-if="showText3">文字三</p>