vue.js 点击目标元素显示div，点击目标元素外其他位置，隐藏div

前言

因需求特殊，大家都常常会自己写弹窗，弹层等。点击目标元素（如按钮，输入框等等），显示div；点击目标元素外其他位置，隐藏div。那么用vue.js，要怎么实现呢？

实现思路

1. 给页面最外出div加点击事件,设置是否显示div参数为false：@click=“showBox= false”
2. 给目标元素加点击事件，设置是否显示div参数为true， 并给点击事件设置阻止单击事件继续传播：@click.stop=“showBox= true”

那么就直接上代码了

<template>
	  <div @click="showBox=false">                                        <!-- 最外层div -->
	  
	  		<p>其他内容</p>
	  		<p>其他内容</p>
	  		<div v-show="showBox"> test div</div>                         <!-- 是否显示该div -->
	  		<span @click.stop="showBox=true">点击显示div</span>            <!-- 目标元素 -->
	  		<p>其他内容</p>
	  		<p>其他内容</p>
	  		
	    </div>
</template>

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