>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、 v-html指令 ### 1.1.说明 假如我们从服务器请求回来的是一个HTML的代码片段 * 如果我们想将html原样输出,就是用{{}}就可以了 * 如果我们希望浏览器解析html后展示,那就要使用到v-html了 ### 1.2.怎么做 ``` <div id="app"> <h2>{{zimug}}</h2> <h2 v-html="zimug"></h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { zimug: '<a href="https://www.toutiao.com/c/user/55190581999/#mid=1640894370966536">今日头条-字母哥课堂</a>' } }) </script> ``` ### 1.3.效果 实现效果如下(这个是实现效果截图。不可点击): ![](https://img.kancloud.cn/1f/77/1f77298e365368b5a44f2d46376d172d_1122x79.png) ## 二、 v-pre指令 ### 2.1.说明 如果我们想把下面的这段文字原样输出,则么办? ~~~ 字母哥课堂讲的真不错,特别是{{Mustache}}插值表达式 ~~~ **注意**文本里面有一个`{{Mustache}}`,vue会去找Mustache变量,找不到会报错。 ![](https://img.kancloud.cn/f5/67/f5672975dc436db3fe8b7a13ec2355f6_658x56.png) 即使我们定义了变量,也不满足我们的需求。我们需要将Mustache原样输出,而不是交给浏览器做变量插值操作,这就需要用到v-pre指令 ### 2.2.怎么做 ``` <div id="app" style="background-color:aquamarine"> <h2 v-pre>字母哥课堂讲的真不错,特别是{{Mustache}}插值表达式</h2> </div> ``` ### 2.3.效果 这样,vue就不会去解析{{}},而是原样显示出来,下图为显示效果 ![](https://img.kancloud.cn/f4/30/f430fc8d34441c26dfedc47b2eff7b07_602x26.png)