vue 隐藏

<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <p v-if="isVisible">This is a paragraph that can be hidden or shown.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true // 控制元素的显示和隐藏状态
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible; // 切换元素的显示和隐藏状态
    }
  }
};
</script>

<style scoped>
/* 添加一些样式以增强视觉效果 */
p {
  margin-top: 20px;
  font-size: 18px;
}
</style>

解释说明：

• v-if 指令：用于根据 isVisible 的布尔值来控制 <p> 元素的显示与隐藏。当 isVisible 为 true 时，段落会显示；否则会被移除。
• @click 事件：绑定到按钮上，点击按钮时调用 toggleVisibility 方法。
• toggleVisibility 方法：切换 isVisible 的布尔值，从而实现元素的显示和隐藏。

如果需要进一步的帮助或有其他问题，请告诉我！