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:需要在后面拼接,同时标签内的内容将无法输出。