vue如何實作輸出原始html？

這篇文章主要介紹了web前端vue實作內插文字和輸出原始html，現在分享給大家，也給大家做個參考。

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的資料。所有 Vue.js 的範本都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在vue裡最常見的資料綁定是使用「Mustache」語法(雙大括號) 的文字插值：

<span>Message: {{ value }}</span> // 插值文本

無論何時，綁定的資料物件上value 屬性發生了改變，頁面上都會回應的做出重新渲染。

或有時候只是想更新一次，不想每次都更新資料了頁面也重新渲染，可以透過v-once指令也能實現一次性的更新：

<span v-once>这个将不会改变: {{ value }}</span> 
// value的值改变了一次后，第二次改变时就不会再重新渲染页面

有時你插入的不是單單一個文字時，例如一個富文本的值時，它包含了各種文字值和各種原始的html的標籤，要完整的顯示到頁面上，就得使用v-html的指令：

<template>
 <p v-html="htmlvalue"></p> // 调用显示富文本，将会按照原始的html显示
</template>
<script>
export default {
 data(){
 return{
  htmlvalue: &#39;<span style="color:red;">the should be red</span>&#39; // 比如：这是一个富文本的值
 }
 }
}
</script>

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用微信小程式如何實作MUI數位輸入框效果

在微信小程式中如何實作摺疊面板

在微信小程式中gallery slider元件的使用方法

Vue中render函數基本用法（詳細教學）

#在微信小程式中如何使用scroll-view元件實作捲動動畫

#在微信小程式中有關checkbox元件的使用

在JavaScript中如何計算多邊形質心

在微信小程式中如何使用switch開關選擇器

#

以上是vue如何實作輸出原始html？的詳細內容。更多資訊請關注PHP中文網其他相關文章！