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的區別在於它實現的表單組件的雙向綁定(數據對象上的值改變,插值會發生變化;當插值發生變化時,數據對象的值也會改變。),如果用於表單控件以外標簽是沒有用的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM