Vue中插入HTML程式碼的方法
阿新 • • 發佈:2018-12-11
我們需要吧<p>Hello World</p>
插入到<p>My name is Pjee</p>
應該如何做?
一、使用v-html
v-html:更新元素的 innerHTML
const text = `<p>Hello World</>`
<p>
My name is Pjee
<p v-html='text'></p>
</p>
注意:
你的站點上動態渲染的任意 HTML 可能會非常危險,因為它很容易導致 XSS
攻擊。請只對可信內容使用 HTML 插值,絕不要對使用者提供的內容使用插值。
二、渲染函式
渲染函式:這是通過對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很少用到,那麼這個東西就更少有人使用到了
如果現在還有一段<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>