如何在Vue中插入HTML代碼

本篇文章為大家展示了如何在Vue中插入HTML代碼，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設|成都網(wǎng)站改版|優(yōu)化|托管以及網(wǎng)絡推廣，積累了大量的網(wǎng)站設計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設計服務，案例作品覆蓋工商代辦等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結合品牌形象的塑造，量身開發(fā)品質網(wǎng)站。

一、使用v-html

v-html:更新元素的 innerHTML

const text = `<p>Hello World</>`
<p>
  My name is Pjee
  <p v-html='text'></p>
</p>

注意：你的站點上動態(tài)渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

二、渲染函數(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>

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

上述內容就是如何在Vue中插入HTML代碼，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：如何在Vue中插入HTML代碼
瀏覽路徑：http://bm7419.com/article10/jdiido.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、手機網(wǎng)站建設、軟件開發(fā)、ChatGPT、外貿(mào)建站、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)