vue中{{}},v-text和v-html區(qū)別與應用詳解
更新時間：2021年09月09日 10:26:49 作者：栗栗本栗
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應用詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
- {{}}獲取值，不會清空標簽原有內容
- v-text 獲取值，會清空標簽原有內容，輸出的是純文本
- v-html 獲取值，會清空標簽原有內容，若數據中包含html標簽，將其當html標簽解析后輸出
<!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>
到此這篇關于vue中{{}},v-text和v-html區(qū)別與應用詳解的文章就介紹到這了,更多相關vue中{{}},v-text和v-html區(qū)別與應用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,這篇文章主要給大家介紹了關于前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue基于Element按鈕權限實現方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在項目開發(fā)中，我們經常會遇到表單保存的功能，本文主要介紹了v-for中動態(tài)校驗el-form表單項的實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧<BR>2022-05-05
本文通過實例代碼給大家介紹了為什么Vue.use()在new Vue() 之前使用,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細的內容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實Pinia就是Vuex5,只不過為了尊重原作者的貢獻就沿用了名字Pinia,下面這篇文章主要給大家介紹了關于Vue.js狀態(tài)管理之Pinia與Vuex的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了在antd Table中插入可編輯的單元格實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06