>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、 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.效果 實現效果如下（這個是實現效果截圖。不可點擊）：  ## 二、 v-pre指令 ### 2.1.說明 如果我們想把下面的這段文字原樣輸出，則么辦？ ~~~ 字母哥課堂講的真不錯，特別是{{Mustache}}插值表達式 ~~~ **注意**文本里面有一個`{{Mustache}}`,vue會去找Mustache變量，找不到會報錯。  即使我們定義了變量，也不滿足我們的需求。我們需要將Mustache原樣輸出，而不是交給瀏覽器做變量插值操作，這就需要用到v-pre指令 ### 2.2.怎么做 ``` <div id="app" style="background-color:aquamarine"> <h2 v-pre>字母哥課堂講的真不錯，特別是{{Mustache}}插值表達式</h2> </div> ``` ### 2.3.效果 這樣，vue就不會去解析{{}}，而是原樣顯示出來，下圖為顯示效果