vue3通过一个布尔型变量控制元素的显示和隐藏

在Vue3中，你可以使用一个布尔类型的`v-model`绑定到一个属性上来控制元素的显示或隐藏。当这个属性值为`true`时，对应的元素会显示；当它为`false`时，元素会被隐藏。这通常通过模板的条件渲染语法`<template v-if="showElement">...</template>`或者简化的`<div :visible="showElement"></div>`来实现。

例如：

<template>
  <button @click="toggleVisibility">点击切换</button>
  <p :visible="showParagraph">这是隐藏或显示的段落。</p>
</template>

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

const showParagraph = ref(true); // 使用ref管理布尔值

function toggleVisibility() {
  showParagraph.value = !showParagraph.value;
}
</script>

在这个例子中，每次点击按钮，`showParagraph` 的值就会改变，进而切换`<p>`元素的显示状态。