Vue, as one of the three major web front-end frameworks, is extremely popular and was once selected as the most popular open source project on GitHub.
After you have learned the basics of HTML, CSS, and JS , and want to start a front-end framework, Vue is the best choice. Its threshold is not so high, but the popularization rate is very high. Becoming a Web front-end engineer must know the technology stack One .
The learning goal of this blog is v-text, v-html instructions
v-text
The function of this instruction is
very similar to the interpolation expression { {}}.
First look at a piece of code:
<div id="app">
<p>{
{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
This is the simplest interpolation expression {
{}} usage.
No problem, we successfully displayed the value of data on the p label through double brackets.
Let's look at the following piece of code:
<div id="app">
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
This time we use the v-text command to display the content of the message. There is
no problem. Now it seems that the two methods seem to be exactly the same, but if we make a small modification to the code.
<div id="app">
<p>哈哈哈{
{message}}</p>
<p v-text="message">哈哈哈</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello!'
}
});
</script>
Can you see the difference? Hehe~ The
interpolation expression {
{}} will only replace its own placeholder and will not affect the display of other elements of the element.
But v-text will completely cover the original content of the element.
These two methods have corresponding applications in actual development scenarios, so we must distinguish!
v-html
We have already learned about interpolation expressions {
{}} and v-text , both of which can show the value of the corresponding variable in data, but what if the value of the variable we get now is a code string ?
In the era when the front and back ends were not separated, the back end often returned some code strings to us, which we had to render to the page after some processing.
Let’s try the interpolation expression {
{}} and v-text to show the code string.
<div id="app">
<p>{
{code}}</p>
<p v-text="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
Obviously, neither the interpolation expression {
{}} nor the v-text can meet our needs. The role of
v-html is to fulfill this demand.
<div id="app">
<p v-html="code"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
code:'<h3>我是代码，哈哈，你能把我渲染出来吗</h3>'
}
});
</script>
very perfect.
But one thing to remind is that v-html is best used with caution , if your code is not considered rigorously, it is easy to be attacked by hackers xss . Another point is that both v-html and v-text will completely cover the original content of the element .
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat official account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials
