vuejsで現在の要素を非表示にする方法

vuejs で現在の要素を非表示にする実装方法: 1. ページがマウントされた後、グローバル クリック イベントをリッスンします; 2. 現在クリックされている要素を取得し、次に従って現在の要素自体の属性を取得します。ニーズ; 3. 現在クリックされている要素が非表示にする要素と同じであるかどうかを判断します; 4. 現在クリックされている要素が非表示にする要素と同じでない場合、その要素は非表示になります。

この記事の動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs で現在の要素を非表示にする方法は?

Vue は、現在の要素の外側をクリックして現在の要素を非表示にする実装を実装します (実装のアイデア)

1. バインディング要素

2. マウントされたライフ サイクル

3. 実装のアイデア

• ページがマウントされた後、グローバル クリック イベントをリッスンします。
• 現在クリックされている要素を取得し、要件に従って現在の要素自体の属性を取得します
• 現在クリックされている要素と非表示にする要素が同じかどうかを判断します
• 現在クリックされている要素と非表示にする要素は同じです 異なる場合は非表示にします

4. 最終的な効果

次に、vue が実装するターゲット要素以外のページの他の側面を見てみましょう。ポップアップ ウィンドウをその場で非表示にします。

#メソッド:

ステップ 1: ページの最も外側の要素 p にクリック イベントを追加します。

: @click="popShow = false"。

ステップ 2: クリック イベントをクリック ターゲット要素に追加します

: @click="popShow = true"。

注: PopShow は、ポップアップ ウィンドウの表示と非表示を制御するフラグです。

#PS: 他の場所をクリックして p

方法 1:

## を非表示にする vue の実装を見てみましょう。 # イベントをリッスンする

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法 2 (より良い):

クリック イベントを最も外側の p に追加する @click="userClick= false "

クリックされた要素に を追加します: @click.stop="userClick=!userClick"

方法 3:

<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>

概要:

vue.js イベントの .stop 修飾子を使用すると、イベントがバブルして伝播し続けるのを防ぐことができます。あるいは、ネイティブ JS のevent.stopPropagation() メソッドを使用することもできます。イベント。

指定した p に .stop を追加すると、p 内にない要素をクリックした場合にのみ、要素がページに表示され、その結果、次の操作時に p が非表示になることがわかります。他の場所をクリックしてください。

p の表示をトリガーするボタンに .stop を追加する必要があります。そうしないと、ボタンがクリックされるとすぐに show() がトリガーされ、ページに反映されます。はすぐにトリガーされ、p は表示されません。

推奨: 「

最新の 5 つの vue.js ビデオ チュートリアル セレクション

」

以上がvuejsで現在の要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。