Vue Data Binding HTML

Plain text display of HTML tags/treated as HTML tags;

1) When using two curly braces, if the string content is HTML tag, then it will not be escaped;

2) When using three curly braces, the HTML tags inside the string are escaped directly

A. Two curly braces:

1 <DivID= "App">  2 {{html}}3 </Div>  4 <Script>  5     varVMS= NewVue ({6 el:"#app",  7 data: {8 HTML:"<span>span</span>"  9         }  Ten     })   One </Script>  

Output Result:

1 < span >span</span>  

B. Three curly braces:

1 <DivID= "App">  2 {{{html} }}3 </Div>  4 <Script>  5     varVMS= NewVue ({6 el:"#app",  7 data: {8 HTML:"<span>span</span>"  9         }  Ten     })   One </Script>   A <Script>   -     functionload () { - VMs. $mount ("#app");  the     }   - </Script>  

Output:

1 Span

3) Invalid data binding for inserted content (in case of No partials), two curly braces, three curly braces

1 <DivID= "App">  2 {{{html} }}3 </Div>  4 <Script>  5     varVMS= NewVue ({6 el:"#app",  7 data: {8 HTML:"<span>span{{val}}</span>",  9 Val:" One"    Ten         }   One     })   A </Script>   - <Script>   -     functionload () { the VMs. $mount ("#app");  -     }   - </Script>          

Output:

Span{{val}}

Description no data binding.

4) Prohibit dynamic rendering on user-submitted content, or be subject to XSS attacks

5) interpolation can also be used in attributes of HTML tags, such as class, or ID, or other.

However, it is not possible to use interpolation in the instruction and particularity of Vue.js.

Vue Data Binding HTML