v-html 、v-text({{}}) 、v-model的區別

說一下最近遇到的一個bug，以及解決方案
項目中遇到的後端給出iconfont的字段

在數據裏面這樣顯示

當我用{{}}直接將這個字段顯示出來時

 

頁面顯示這種狀況

即有的icon能解析可是有的卻不能解析 這個時候咱們用v-html

這個時候頁面

由此探討下v-html v-text({{}}) v-model的區別

1.v-html
　　v-html用於輸出html,它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。

2.v-text
　　v-text是用於操做純文本，它會替代顯示對應的數據對象上的值，當綁定的數據對象上的值發生改變，插值處的內容也隨之更新。注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化；可是當插值發生變化並不會影響數據對象的值。其中：v-text能夠簡寫爲{{}}，而且支持邏輯運算。

3.v-model
　　v-model一般用於表單組件的綁定，例如input ，select等。它與v-text的區別在於它實現的表單組件的雙向綁定（數據對象上的值改變，插值會發生變化；當插值發生變化時，數據對象的值也會改變。），若是用於表單控件之外標籤是沒有用的。