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

11112發表於2018-07-10

說一下最近遇到的一個bug,以及解決方案,然後由此說一下這三者的區別。

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

在資料裡面這樣顯示

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

當我用{{}}直接將這個欄位顯示出來時

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

頁面顯示這種情況

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

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

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

這個時候頁面

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

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

  1. v-html

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

  1. v-text

  v-text是用於操作純文字,它會替代顯示對應的資料物件上的值,當繫結的資料物件上的值發生改變,插值處的內容也隨之更新。注意:此處為單向繫結,資料物件上的值改變,插值會發生變化;但是當插值發生變化並不會影響資料物件的值。其中:v-text可以簡寫為{{}},並且支援邏輯運算。

  1. v-model

  v-model通常用於表單元件的繫結,例如input ,select等。它與v-text的區別在於它實現的表單元件的雙向繫結(資料物件上的值改變,插值會發生變化;當插值發生變化時,資料物件的值也會改變。),如果用於表單控制元件以外標籤是沒有用的。

相關文章