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