vue 点击div以外隐藏指定div,再次查询如果有数据则重新显示div

您可以使用Vue的v-on指令，以及事件修饰符来实现点击div以外隐藏指定div的功能，再次查询如果有数据则重新显示div的功能可以使用Vue的watch监听数据变化，当数据发生变化时再显示指定div。

具体实现方法如下：

1. 在指定div上添加一个ref属性：ref="targetDiv"

2. 在Vue实例中添加一个data属性，用于控制指定div的显示与隐藏：showTargetDiv: false

3. 在Vue实例中添加一个watch监听数据变化：

watch: {
  // 监听数据变化
  data: function() {
    // 如果数据不为空，则显示指定div
    if (this.data) {
      this.showTargetDiv = true;
    }
  }
}

4. 在指定div上添加一个v-show指令，用于控制指定div的显示与隐藏：

<div ref="targetDiv" v-show="showTargetDiv">指定div的内容</div>

5. 在Vue实例中添加一个自定义方法，用于处理点击div以外的事件：

methods: {
  // 点击div以外的事件处理
  onClickOutside: function(event) {
    // 判断点击的元素是否在指定div内
    if (!this.$refs.targetDiv.contains(event.target)) {
      // 隐藏指定div
      this.showTargetDiv = false;
    }
  }
}

6. 在指定div外层的元素上添加一个v-on指令，用于绑定点击事件，并添加事件修饰符：@click.outside="onClickOutside"，表示点击元素以外的地方触发onClickOutside方法。

<div class="container" @click.outside="onClickOutside">
  <!-- 其他内容 -->
  <div ref="targetDiv" v-show="showTargetDiv">指定div的内容</div>
</div>

这样就完成了点击div以外隐藏指定div，再次查询如果有数据则重新显示div的功能了。