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

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30675967

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weijiutao/p/10659434.html

本文深入探讨Vue.js中的插值表达式、v-text和v-html的使用方法及区别，通过实例演示如何在页面中展示和操作数据，特别关注HTML标签的处理方式。

之前的文章我们初识了 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>