Vue中插入HTML代碼的方法
我們需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>應(yīng)該如何做？
一、使用v-html
v-html:更新元素的 innerHTML
const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p>
注意：你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值，絕不要對(duì)用戶(hù)提供的內(nèi)容使用插值。
二、渲染函數(shù)
渲染函數(shù)：這是通過(guò)對(duì)VNode（虛擬DOM）的操作來(lái)生成
text(){
render:(h)=>{
h(
'div',
[
h('p', 'Hello'),
' world!'
]
)
}
}
<p>Hello World{{this.text()}}</p>
三、JSX
JSX：這個(gè)方法在React使用最為廣泛，但是Vue中使用需要安裝Babel插件
text(){
return (<p>Hello World</p>)
}
<p>Hello World{{this.text()}}</p>
四、domPropsInnerHTML
domPropsInnerHTML：如果說(shuō)JSX在vue很少用到，那么這個(gè)東西就更少有人使用到了
如果現(xiàn)在還有一段<p>How are you?</p>需要我們插入到Hello World中，我們就可以使用這種方法
const newText = '<p>How are you?</p>'
text(){
return (
<p>
Hello World
<p domPropsInnerHTML={this.newText}></p>
</p>
)
}
<p>Hello World{{this.text()}}</p>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式
這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問(wèn)題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue v-for循環(huán)出來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定值問(wèn)題
這篇文章主要介紹了vue v-for循環(huán)出來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
uni-app獲取當(dāng)前環(huán)境信息的方法
uni-aap提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個(gè)API獲取系統(tǒng)信息，這篇文章主要介紹了uni-app獲取當(dāng)前環(huán)境信息的相關(guān)知識(shí),需要的朋友可以參考下2022-11-11
Vue.filter函數(shù)用于注冊(cè)一個(gè)全局的過(guò)濾器,該過(guò)濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結(jié),需要的朋友可以參考下2024-08-08
由于Vue多個(gè)狀態(tài)分散的跨越在許多組件和交互間各個(gè)角落，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng)。為了解決這個(gè)問(wèn)題，Vue提供了vuex。本文將詳細(xì)介紹Vue狀態(tài)管理vuex,需要的朋友可以參考下2020-02-02
vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題)
項(xiàng)目全線(xiàn)使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語(yǔ)法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題),需要的朋友可以參考下2024-04-04
Vue封裝一個(gè)簡(jiǎn)單輕量的上傳文件組件的示例
這篇文章主要介紹了Vue封裝一個(gè)簡(jiǎn)單輕量的上傳文件組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09