v-text
Ova direktiva prihvata kao argument promenjivu koja predstavlja tekst sa kojim treba da se ažurira ceo sadržaj taga. Ima istu funkcionalnost kao interpolacija string-a.
See the Pen v-text by Web programiranje (@chos) on CodePen.
v-html
Korišćenjem ove direktive omogućavamo da sadržaj bude umetnuti kao obični HTML tj. Vue.js ga neće obrađivati kao da je template kompajlerom. Problem može da se javi kod “single-file component“, jer stilovi iz komponente neće imati uticaj na sadržaj ubačen sa ovom direktivom.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Hello!</h1>' } }); </script> |
Kada koristiti v-html direktivu?
Dinamično prikazivanje proizvoljnog HTML-a može biti vrlo opasno, jer može lako dovesti do XSS napada. Preporuka je da se “v-html” direktiva koristi samo za pouzdani sadržaj, što implikuje da se nikada ne koristi za sadržaju koji ubacuje korisnik. Jedan od razloga za korišćenje ove direktive je ubacivanje unicode koda (npr. 😸 HTML obradi i generiše u 😸)
|
1 2 |
<div>😸</div> je ustvari <div>😸</div> |
Primer
See the Pen v-text by Web programiranje (@chos) on CodePen.
v-pre
Sadržaj HTML taga koji sadrži “v-pre” direktivu neće biti obradjen i kompajliran od strane Vue.js, već će biti prikazan isto kao što je zapisan u samom kodu.
Primer
Na elementu koji ima direktivu “v-pre” se neće izvršiti interpolacija, već će se prikazati duple zagrede.
See the Pen V-pre by Web programiranje (@chos) on CodePen.