Vue 从入门到进阶之路（二）

之前的文章我们初识了 vue，对其原理，数据绑定和方法进行了简单的演示，本篇将对 vue 插值表达式，v-text，v-html 进行讲解。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <p>{{name}}</p>
11     <p v-text="name"></p>
12     <p v-html="name"></p>
13 
14     <hr>
15     <p>{{info}} test</p>
16     <p v-text="info">test</p>
17     <p v-html="info">test</p>
18 
19     <hr>
20     <p>{{info}} test</p>
21     <p v-text="info + ' test'"></p>
22     <p v-html="info + ' test'"></p>
23 
24 </div>
25 <script>
26     var app = new Vue({
27         el: '#app',
28         data: {
29             name: 'zhangsan',
30             info: '<h1>I like vue</h1>'
31         }
32     })
33 </script>
34 </body>
35 </html>

运行结果如下：

我们可以看出：

　　{{ }} 插值表达式：可以输出非 HTML 标签数据，无法转义 HTML 标签；

　　v-text：可以输出非 HTML 标签数据，无法转义 HTML 标签；

　　v-html：可以输出非 HTML 标签数据，可以转义 HTML 标签；

如果我们想要在数据后面添加其他数据的话：

　　{{ }} 插值表达式直接在后面添加；

　　v-text：需要在后面拼接，同时标签内的内容将无法输出。

　　v-html：需要在后面拼接，同时标签内的内容将无法输出。