vue实现点击空白处,隐藏div

可以通过以下方式实现：

1. 在需要隐藏的 `div` 外面包一个父级元素，并且给这个父级元素添加一个点击事件。

<template>
  <div class="wrapper" @click="hideDiv">
    <div class="content" v-show="showDiv">Hello World</div>
  </div>
</template>

2. 在 `data` 中定义一个 `showDiv` 变量，用来控制 `div` 是否显示。

<script>
export default {
  data() {
    return {
      showDiv: false
    }
  },
  methods: {
    hideDiv() {
      this.showDiv = false;
    }
  }
}
</script>

3. 在 `content` 的点击事件中，添加 `event.stopPropagation()` 阻止事件冒泡，避免触发父级元素的点击事件。

<script>
export default {
  data() {
    return {
      showDiv: false
    }
  },
  methods: {
    hideDiv() {
      this.showDiv = false;
    },
    toggleDiv() {
      this.showDiv = !this.showDiv;
    }
  }
}
</script>

完整的代码如下：

<template>
  <div class="wrapper" @click="hideDiv">
    <div class="content" @click.stop="toggleDiv" v-show="showDiv">Hello World</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: false
    }
  },
  methods: {
    hideDiv() {
      this.showDiv = false;
    },
    toggleDiv() {
      this.showDiv = !this.showDiv;
    }
  }
}
</script>

这样，每次点击 `content` 时，会切换 `div` 的显示和隐藏；而点击 `wrapper` 时，会隐藏 `div`。