vue点击页面让盒子显示和隐藏

您可以使用Vue的指令`v-show`或者`v-if`来实现点击页面让盒子显示和隐藏的效果。

方法一：使用v-show指令

您可以在页面中添加一个盒子，并为其绑定一个`click`事件，在事件处理函数中使用Vue的数据绑定来控制`v-show`的值。例如：

<template>
  <div>
    <div class="box" @click="showContent = !showContent">点击我显示/隐藏内容</div>
    <div class="content" v-show="showContent">这是要显示/隐藏的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  }
}
</script>

在上面的代码中，我们定义了一个`showContent`变量来控制盒子的显示和隐藏。当点击盒子时，`showContent`的值会取反，从而实现显示和隐藏的效果。在`<div>`元素中使用了`v-show`指令来根据`showContent`的值来控制盒子的显示和隐藏。

方法二：使用v-if指令

您也可以使用`v-if`指令来实现点击页面让盒子显示和隐藏的效果。在这种方法中，您需要在模板中使用一个变量来控制盒子是否应该显示。例如：

<template>
  <div>
    <div class="box" @click="showContent = !showContent">点击我显示/隐藏内容</div>
    <div v-if="showContent" class="content">这是要显示/隐藏的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  }
}
</script>

在上面的代码中，我们定义了一个`showContent`变量来控制盒子的显示和隐藏。当点击盒子时，`showContent`的值会取反，从而实现显示和隐藏的效果。在`<div>`元素中使用了`v-if`指令来根据`showContent`的值来控制盒子的显示和隐藏。

总结：

使用`v-show`和`v-if`指令都可以实现点击页面让盒子显示和隐藏的效果。但是，`v-show`只是简单地控制元素的显示和隐藏，而`v-if`则是根据条件动态地添加或删除元素。在某些情况下，使用`v-if`指令可能会更加灵活和高效。