溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何在Vue中插入HTML代碼，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
一、使用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>Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
上述內容就是如何在Vue中插入HTML代碼，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
