淺談Vue.js中v-text,v-html,{{}}之間的異同

實際項目中可能你經常那麼寫，也經常看到過，但你未必真的深刻認識這幾個之間的區別，我記得在以前公司有人這麼說過自己寫css代碼，全程靠猜，例如margin不行改padding，padding不行改定位，這就很能說明問題，對知識點理解不深刻，你不能說他不能做東西，但這樣寫出來的頁面，自然是兼容性差，耦合性過高

看下面一段代碼

<div id="app">　　<p>{{message}}</p>　　<p v-html="html"></p>　　<p v-text="text"></p></div>
<script>　　let app = new Vue({　　  el: "#app",　　  data: {　　　　message: "<span>通過雙括號綁定</span>",　　　　html: "<span>html標籤在渲染的時候被解析</span>",　　　　text: "<span>html標籤在渲染的時候被源碼輸出</span>",　　  }      });</script>
輸出結果
<span>通過雙括號綁定</span>html標籤在渲染的時候被解析<span>html標籤在渲染的時候被源碼輸出</span>
總結：
{{message}}將數據解析為純文本，不能輸出真正的html，在頁面加載時顯示{{}}（就是會頁面刷新閃爍默認顯示{{}}），所以通常使用v-html和v-text代替；v-html="html"，輸出真正的html，標籤會被瀏覽器解析掉；v-text="text"：將數據解析為純文本，不能輸出真正的html，與花括號的區別是在頁面加載時不閃爍顯示{{}}