To show a simple text output in VueJS, you have to enter the name of the variable in cur} that is, double curly braces. Curly braces (second brackets) are also called “Mustache” syntax. See the example below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id= "vue_template" >
<script type = "text/javascript" > var app = new Vue({ el: '#vue_template' , data: { name: "Evan You" } })
|
Output:
Welcome Evan You!
But you can also use VueJS’s v-text directive if you want. And the v-text directive works exactly like {}}. This means that
will output exactly the same as
{{content}}
. See the example below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html lang= "en" >
<div id= "app" > <div v-text= "content" >
new Vue ({ el: '#app' , data: { content: 'Hello World' } })
|
Output:
Hello World
When you pass HTML markup to v-text. Then it will encode HTML markup in HTML entities. See the example below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html lang= "en" >
<div id= "app2" > <div v-text= "content" >
new Vue ({ el: '#app2' , data: { content: '<h3<Hello World
} })
|
Output: