重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章为大家展示了vuejs怎么隐藏当前元素,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、做网站、外贸营销网站建设、罗甸网络推广、重庆小程序开发、罗甸网络营销、罗甸企业策划、罗甸品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供罗甸建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
vuejs隐藏当前元素的实现方法:1、在页面挂载完后,监听全局点击事件;2、获取当前点击的元素,根据需求获取当前元素本身的属性;3、判断当前点击元素与要隐藏的元素是否相同;4、当前点击元素与要隐藏的元素不相同则隐藏。
本文操作环境:Windows7系统、vue2.9.6版,DELL G3电脑。
vuejs怎么隐藏当前元素?
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
1. 绑定元素
2. mounted生命周期
3. 实现思路
页面挂载完后,监听全局点击事件
获取当前点击的元素,根据需求获取当前元素本身的属性
判断当前点击元素与要隐藏的元素是否相同
当前点击元素与要隐藏的元素不相同则隐藏
4. 最终效果
接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗
方法:
步骤1:给页面最外出的元素p加点击事件:@click=“popShow = false”
。
步骤2:给点击目标元素加点击事件:@click=“popShow = true”
。
备注:popShow 为控制弹窗显示与隐藏的标志。
PS:下面看下vue实现点击其他地方隐藏p
方法一:
通过监听事件
document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; } })
方法二(比较好):
给最外层的p加个点击事件 @click="userClick=false"
给点击的元素上面加上:@click.stop="userClick=!userClick"
方法三:
...
小结:
通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播,也可以使用原生js事件的event.stopPropagation()方法。
通过向指定的p添加.stop,可以实现只有点击非该p内的元素时,才会往上冒泡至page,从而实现点击其他地方隐藏p。
要向触发显示p的按钮添加.stop,否则一点击按钮,触发show()之后传播到page,立马就会触发hide(),p就无法显示。
上述内容就是vuejs怎么隐藏当前元素,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。