VueのHTMLでクリックイベントをエスケープする方法

Vue では、通常、v-on ディレクティブを使用してクリック イベントをバインドします。例:

<button v-on:click="handleClick">点击我</button>

このコードは、このボタンがクリックされると、handleClick という名前のメソッドが実行されることを示します。

ただし、場合によっては、不等号 (<) や比較記号 (&) など、HTML で特別な意味を持つ文字を表示する必要があります。これらの文字はブラウザによって HTML タグまたはエンティティとして解釈され、表示上の問題が発生する可能性があります。

この状況を回避するには、これらの文字をエスケープする必要があります。 Vue には、この機能を実現するための組み込みメソッドである v-html ディレクティブが用意されています。

v-html ディレクティブを使用すると、HTML コードを HTML 要素にレンダリングできます。例:

<div v-html="htmlCode"></div></p>
<p>このコードは、htmlCode 変数に格納されている HTML コードを div 要素にレンダリングすることを意味します。 </p>
<p>ただし、v-html ディレクティブを使用すると、セキュリティ上の問題により、Vue はデフォルトで JavaScript コードやそれに含まれるイベント バインディングのレンダリングを禁止します。これは、XSS 攻撃の発生を防ぐためです。 </p>
<p>本当に JavaScript コードを使用するか、HTML でイベントをバインドする必要がある場合は、Vue が提供する別の命令 v-once を使用して、Vue がコンテンツをコンパイルしないようにする必要があります。 </p>
<p>たとえば、クリック イベントを含むボタンを HTML でレンダリングする場合、次のように v-html および v-once ディレクティブを使用できます。 </p>
<pre class="brush:php;toolbar:false"><div v-html="`<button v-once v-on:click='${()=>console.log("clicked")}'></button>`"></div>

このコードは、ボタン クリック イベントが HTML にレンダリングされます。

セキュリティの問題のため、特にレンダリングされたコンテンツがユーザー入力からのものである場合、HTML コード内で JavaScript コードとイベント バインディングを直接使用することはお勧めできません。この場合、コンポーネントや関連メソッドを使用するなど、他の方法でロジックを処理することをお勧めします。

以上がVueのHTMLでクリックイベントをエスケープする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。