Vue.js 实现点击元素外部关闭元素：v-show 和 @click 事件

可以使用 Vue.js 中的 `v-show` 和 `@click` 事件来实现打开和关闭元素：

在 `data` 中添加一个变量 `show`，用于控制元素的显示和隐藏，初始值为 `false`。
```
```javascript
data() {
  return {
    show: false
  }
}
```
```
在模板中添加一个按钮和要显示的元素，在元素上添加 `v-show` 指令，根据 `show` 变量来控制元素的显示和隐藏。
```
```html
<button @click="show = !show">打开元素</button>
<div v-show="show">要显示的元素</div>
```
```

在元素外部添加一个点击事件，当点击元素外部时，关闭元素，即将 `show` 变量赋值为 `false`。

```javascript
mounted() {
  document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
  document.removeEventListener('click', this.handleClickOutside)
},
methods: {
  handleClickOutside(event) {
    if (!this.$el.contains(event.target)) {
      this.show = false
    }
  }
}
```

完整代码如下：

<template>
  <div>
    <button @click="show = !show">打开元素</button>
    <div v-show="show">要显示的元素</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.show = false
      }
    }
  }
}
</script>