之前的文章我們初識了 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：需要在后面拼接，同時標簽內的內容將無法輸出。