vuejs에서 현재 요소를 숨기는 방법

vuejs에서 현재 요소를 숨기는 구현 방법: 1. 페이지가 마운트된 후 전역 클릭 이벤트를 수신합니다. 2. 현재 클릭된 요소를 가져오고 필요에 따라 현재 요소 자체의 속성을 가져옵니다. .현재 클릭한 요소를 숨길지 여부를 결정합니다. 요소가 동일한지 여부 4. 현재 클릭한 요소가 숨길 요소와 동일하지 않으면 숨겨집니다.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs에서 현재 요소를 숨기는 방법은 무엇입니까?

Vue는 현재 요소 외부를 클릭하여 현재 요소를 숨깁니다(구현 아이디어)

1. 요소 바인딩

2. 구현 아이디어

페이지 마운팅 후 전역 클릭 이벤트를 수신합니다

현재 클릭된 요소를 가져오고, 요구사항에 따라 현재 요소 자체의 속성을 가져옵니다.

현재 클릭된 요소가 숨겨지려는 요소와 동일한지 판단합니다
• The 현재 클릭한 요소는 숨길 요소와 동일하지 않습니다. 그런 다음 숨깁니다
• 4. 최종 효과

그런 다음 vue가 대상 요소를 클릭하여 다른 곳에서 팝업 창을 숨기는 방법을 살펴보겠습니다. 페이지

방법:

1단계: 페이지의 가장 바깥쪽 요소에 pAdd 클릭 이벤트 : @click="popShow = false"를 제공합니다.

2단계: 클릭 대상 요소 : @click="popShow = true"에 클릭 이벤트를 추가합니다.

참고: popShow는 팝업 창의 표시 및 숨기기를 제어하는 ​​플래그입니다.

：@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"

PS: p

방법 1:

이벤트를 청취하여

<template>
<!--向页面添加关闭p的事件监听-->
<p class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示p-->
<button @click.stop="show">点击显示p</button>

<!--指定的p。添加.stop防止点击p内的元素时，整个p被关闭-->
<p @click.stop>
...
</p>

</p>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

방법 2(더 좋음):

가장 바깥쪽 p @click="userClick=false"

에 클릭 이벤트를 추가합니다. 클릭한 요소에 를 추가합니다: @click.stop= " userClick=!userClick"

방법 3:

rrreee🎜요약: 🎜🎜vue.js 이벤트의 .stop 수정자를 사용하여 이벤트가 계속해서 발생하는 것을 방지하거나 다음을 사용할 수 있습니다. 기본 js 이벤트 .stopPropagation() 메서드의 이벤트입니다. 🎜🎜🎜지정된 p에 .stop을 추가하면 p 내에 없는 요소를 클릭할 때만 페이지까지 버블링되어 다른 곳을 클릭할 때 p를 숨길 수 있다는 것을 알 수 있습니다. 🎜🎜🎜p 표시를 트리거하는 버튼에 .stop을 추가하세요. 그렇지 않으면 버튼을 클릭하고 show()가 트리거되자마자 페이지에 전파되고 hide()가 즉시 트리거되고 p가 실행됩니다. 표시되지 않습니다. 🎜🎜🎜추천: "🎜5개의 vue.js 비디오 튜토리얼 중 최신 선택🎜"🎜🎜

위 내용은 vuejs에서 현재 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!