04.新手入門vue之v-text和v-html

v-text

v-text是vue提供的一個指令,用於更新標籤中的內容,和jquery中的innerText和innerHTML很像。


04.新手入門vue之v-text和v-html


v-html

用於向標籤插入html內容,內容按普通 HTML 插入。

04.新手入門vue之v-text和v-html

結論:插值表達式可以把Vue傳遞過來的數據和前臺用戶自己定義的數據結合在一起,但是v-text只能顯示Vue對象傳遞過來的數據,會替換掉節點裡所有的內容;v-html會在指定標籤插入html內容。

v-text注意事項

使用插值表達式的時候,如果頁面頻繁刷新或者網速加載很慢的時候,頁面會先出現“{{ msg }}”,再一閃而過出現真實的數據,可以使用 v-text解決該問題。

v-html注意事項

在網站上動態渲染任意 HTML 是非常危險的,因為容易導致 XSS 攻擊。只在可信內容上使用 v-html,永不用在用戶提交的內容上。

在單文件組件裡,scoped 的樣式不會應用在 v-html 內部,因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS,你可以替換為 CSS Modules 或用一個額外的全局


分享到:


相關文章: