How HTML element can be bind to page by vue?

In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.

I have a data called websiteHtmlTag and I want to render its value on my page:

websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>

So lets try the latest way:

{{websiteHtmlTag}}

This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .

First we create a p tag and then we should bind websiteHtmlTag to this element:

<p v-html="websiteHtmlTag"></p>

Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.

Codes are available on Codepen and Github gist:

🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo

🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a

#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding

http://t.me/WebDevelopmentReferences