Vue中插入HTML代碼的方法
更新時間：2018年09月21日 13:46:48 作者：Pjee
這篇文章主要介紹了Vue中插入HTML代碼的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
我們需要吧<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)上動態(tài)渲染的任意 HTML 可能會非常危險，因為它很容易導(dǎo)致 XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要對用戶提供的內(nèi)容使用插值。
二、渲染函數(shù)
渲染函數(shù)：這是通過對VNode（虛擬DOM）的操作來生成
text(){
render:(h)=>{
h(
'div',
[
h('p', 'Hello'),
' world!'
]
)
}
}
<p>Hello World{{this.text()}}</p>
三、JSX
JSX：這個方法在React使用最為廣泛，但是Vue中使用需要安裝Babel插件
text(){
return (<p>Hello World</p>)
}
<p>Hello World{{this.text()}}</p>
四、domPropsInnerHTML
domPropsInnerHTML：如果說JSX在vue很少用到，那么這個東西就更少有人使用到了
如果現(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
elementui之el-table如何通過v-if控制按鈕顯示與隱藏
這篇文章主要介紹了elementui之el-table如何通過v-if控制按鈕顯示與隱藏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
使用elementUI table展開行內(nèi)嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3表單組件el-form校驗規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗是非常重要的,rules使用不當(dāng)容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關(guān)于Vue3表單組件el-form校驗規(guī)則rules屬性的相關(guān)資料,需要的朋友可以參考下2024-08-08
Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件
這篇文章主要介紹了Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
vue3上線已經(jīng)很久了,許多小伙伴應(yīng)該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關(guān)于vue3更新的setup語法糖的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue中Object.assign清空數(shù)據(jù)報錯的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
下面小編就為大家分享一篇vue判斷input輸入內(nèi)容全是空格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue3中的組件間的傳值(props)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04