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: