Menu
I had the following code using v-text:
<h1 v-text="content.title"></h1>
Output:
Brand Name is B&C
So I fixed it using v-html in the previous line:
<h1 v-html="content.title"></h1>
Output:
Brand Name is B&C
My question is the following:
Why does it works using v-html and not v-text? I already read the Vue documentation but I don't clearly understand the difference.
787
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.
The v-model is a two-way binding which means if you change the input value, the bound data will be changed. The v-model directive is used to create two-way data bindings on form input, textarea, and select elements. Example: HTML.
The key difference is that v-if conditionally renders elements and v-show conditionally displayselements. This means that v-if will actually destroy and recreate elements when the conditional is toggled. Meanwhile, v-show will always keep the element in the DOM and will only toggle its display by changing its CSS.
Vue.js lets you extend HTML with HTML attributes called directives. Vue.js directives offers functionality to HTML applications. Vue.js provides built-in directives and user defined directives.
v-text sets the textContent of the node. v-html sets the innerHTML of the element. & is an HTML entity. If you want HTML entities interpreted and replaced, you need to have them interpreted as HTML and not text.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
