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

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

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

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

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

1. バインディング要素

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

3. 実装のアイデア

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

4. 最終的な効果

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

#メソッド:

: @click="popShow = false"。

: @click="popShow = true"。

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

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

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

方法 2 (より良い):

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

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

方法 3: