vue3 setup 控制元素的显示和隐藏

Vue 3中的`setup`函数是Composition API的入口点，它用来创建响应式数据和方法等。要在Vue 3中通过`setup`函数控制元素的显示和隐藏，你可以使用Vue的响应式系统来根据状态变量控制元素的渲染。下面是一个简单的示例来说明如何实现：

import { ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式的引用
    const isVisible = ref(false);

    // 一个方法，用来切换isVisible的值
    const toggleVisibility = () => {
      isVisible.value = !isVisible.value;
    };

    // 暴露给模板的变量和方法
    return {
      isVisible,
      toggleVisibility
    };
  }
};

在模板中，你可以使用`v-if`或`v-show`指令来根据`isVisible`的值控制元素的显示和隐藏：

<template>
  <div>
    <!-- 使用v-if -->
    <div v-if="isVisible">
      这个元素在isVisible为true时显示。
    </div>
    <!-- 使用v-show -->
    <div v-show="isVisible">
      这个元素会在isVisible为true时显示，false时隐藏，但不会从DOM中完全移除。
    </div>
  </div>
  <button @click="toggleVisibility">切换显示/隐藏</button>
</template>

通过点击按钮调用`toggleVisibility`方法，`isVisible`的值将会被切换，这将会触发视图的更新，从而根据`isVisible`的值来显示或隐藏元素。