vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
更新時間:2021年09月09日 10:26:49 作者:栗栗本栗
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
- {{}}獲取值,不會清空標(biāo)簽原有內(nèi)容
- v-text 獲取值,會清空標(biāo)簽原有內(nèi)容,輸出的是純文本
- v-html 獲取值,會清空標(biāo)簽原有內(nèi)容,若數(shù)據(jù)中包含html標(biāo)簽,將其當(dāng)html標(biāo)簽解析后輸出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>上午好{{info}}</p> <p v-text="info">上午好</p> <p v-html="info">上午好</p> <hr> <p v-text="addr">hhh</p> <p v-html="addr">hhh</p> <hr> <p v-text="addr2">hhh</p> <p v-html="addr2">hhh</p> </div> </body> </html> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ info:"good", addr:"<a , addr2:'<a rel="external nofollow" >百度</a>' } }); </script>
到此這篇關(guān)于vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解的文章就介紹到這了,更多相關(guān)vue中{{}},v-text和v-html區(qū)別與應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法,需要的朋友可以參考下2024-08-08vue基于Element按鈕權(quán)限實現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實現(xiàn)方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08