Bagaimana untuk melarikan diri dari acara klik dalam html vue

Dalam Vue, kami biasanya menggunakan arahan v-on untuk mengikat peristiwa klik, contohnya:

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

Kod ini menunjukkan bahawa apabila butang ini diklik, kaedah bernama handleClick akan dilaksanakan.

Walau bagaimanapun, dalam sesetengah kes, kita perlu memaparkan beberapa aksara dengan makna istimewa dalam HTML, seperti tanda kurang daripada (<) atau tanda perbandingan (&). Aksara ini mungkin ditafsirkan oleh penyemak imbas sebagai teg HTML atau entiti, menyebabkan masalah paparan.

Untuk mengelakkan perkara ini, kita perlu melarikan diri daripada watak ini. Vue menyediakan kaedah terbina dalam untuk mencapai fungsi ini, arahan v-html.

Menggunakan arahan v-html, kita boleh menjadikan kod HTML ke dalam elemen HTML, contohnya:

<div v-html="htmlCode"></div></p>
<p>Kod ini bermaksud menjadikan kod HTML yang disimpan dalam pembolehubah htmlCode menjadi elemen div. </p>
<p>Walau bagaimanapun, apabila kami menggunakan arahan v-html, Vue secara lalai akan melarang memberikan sebarang kod JavaScript atau pengikatan acara yang terkandung di dalamnya kerana isu keselamatan. Ini adalah untuk mengelakkan serangan XSS daripada berlaku. </p>
<p>Jika kami benar-benar perlu menggunakan kod JavaScript atau mengikat acara dalam HTML, kami perlu menggunakan arahan lain yang v-sekali disediakan oleh Vue untuk menghalang Vue daripada menyusun kandungan. </p>
<p>Sebagai contoh, jika kita ingin memaparkan butang dalam HTML yang mengandungi acara klik, kita boleh menggunakan arahan v-html dan v-sekali seperti berikut: </p>
<pre class="brush:php;toolbar:false"><div v-html="`<button v-once v-on:click='${()=>console.log("clicked")}'></button>`"></div>

Kod ini bermaksud bahawa butang yang mengandungi Peristiwa klik butang dipaparkan ke dalam HTML.

Perlu diambil perhatian bahawa disebabkan oleh isu keselamatan, tidak disyorkan untuk menggunakan kod JavaScript dan pengikatan acara secara langsung dalam kod HTML, terutamanya apabila kandungan yang diberikan datang daripada input pengguna. Dalam kes ini, lebih baik untuk mengendalikan logik dengan cara lain, seperti menggunakan komponen atau kaedah yang berkaitan.

Atas ialah kandungan terperinci Bagaimana untuk melarikan diri dari acara klik dalam html vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!