使用Vue 3的条件渲染指令，创建一个应用，当变量isVisible为true时显示一个按钮，否则显示一段文本。

在Vue 3中，我们可以使用条件渲染指令`v-if`或`v-show`来控制元素的展示。下面是创建这样一个应用的基本示例：

首先，我们需要创建一个Vue组件，并定义一个布尔属性`isVisible`作为我们的条件：

<!-- src/components/ButtonOrText.vue -->
<template>
  <div>
    <button v-if="isVisible" @click="handleClick">显示按钮</button>
    <span v-else>隐藏的内容</span>
  </div>
</template>

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

const isVisible = ref(false);

// 可能需要的事件处理器
const handleClick = () => {
  // 当按钮被点击时，切换isVisible的状态
  setVisible(!isVisible.value);
};

// 定义一个方法来改变isVisible的值
function setVisible(value) {
  isVisible.value = value;
}
</script>

在这个例子中，如果`isVisible`是`true`，那么就会渲染一个按钮；如果`false`，则渲染文本“隐藏的内容”。当你点击按钮时，`handleClick`函数会被调用，这会更改`isVisible`的值，从而改变内容的显示状态。

然后在其他组件（比如App.vue）中引用这个组件并传递`isVisible`的初始状态：

<!-- src/App.vue -->
<template>
  <div id="app">
    <ButtonOrText :isVisible="showButton" @toggleVisibility="toggleVisibility" />
  </div>
</template>

<script>
import ButtonOrText from '@/components/ButtonOrText.vue';

export default {
  name: 'App',
  components: {
    ButtonOrText,
  },
  data() {
    return {
      showButton: true, // 初始时显示按钮
    };
  },
  methods: {
    toggleVisibility() {
      this.showButton = !this.showButton; // 当按钮被点击时，切换showButton的值
    },
  },
};
</script>

在这里，我们通过`v-bind`（简写为`:`)绑定`isVisible`到组件实例上的`showButton`，并通过`@toggleVisibility`监听事件来切换这个值。