之前的文章我们初识了 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：需要在后面拼接，同时标签内的内容将无法输出。