web前端vue實現插值文字和輸出原始html

2022-10-06 21:54:26 字數 657 閱讀 7233

vue.js 使用了基於 html 的模板語程式設計客棧法,允許開發者宣告式地將 dom 繫結至底層 vue 例項的資料。所有 vue.js 的模板都是合法的 html ,所以能被遵循規範的瀏覽器和 html 解析器解析。

在vue裡最常見的資料繫結是使用「mustache」語法 (雙大括號) 的文字插值:

message: } // 插值文字

無論何時,繫結的資料物件上 value 屬性發生了改變,頁面上都會響應的做出重新渲染。

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

這個將不會改變: }

// value的值改變了一次後,第二www.cppcns.com次改變時就不會再重新渲染頁面

有時候你插入程式設計客棧的不是單單乙個文字時,比如乙個富文字的值時,它包含了各種文字值和各種原始的html的標籤,要完整的顯示到頁面上,就得使用v-html的指令:

// 呼叫顯示富文字,將會按照原始的html顯示

注意:你的站點上動態渲染的任程式設計客棧意 html 可能會非常危險,因為它很容易導致xss 攻擊。請只對可信內容使用 html 插值, 絕不要 對使用者提供的內容使用插值。www.cppcns.com

本文標題: web前端vue實現插值文字和輸出原始html

本文位址:

Vue系列 三 之基本語法文字插值

新的屬性 今天先介紹vue最簡單最基本的語法,宣告式渲染。messgae div div var vm newvue script 或者 如果沒有提供el選項,需要手動呼叫mount方法 var vm newvue mount 使用 實現資料繫結到檢視 messgae div var vm newv...

Python實現線性插值和三次樣條插值

關於python資料分析在數學建模中的更多相關應用 python資料分析在數學建模中的應用彙總 持續更新中!y sin x 資料準備 x np.arange np.pi,np.pi,1 定義樣本點x,從 pi到pi每次間隔1 y np.sin x 定義樣本點y,形成sin函式 new x np.ar...

插值查詢演算法的公式和實現

1.插值查詢類似二分查詢,不同的是插值查詢不在是簡單的每次區中間的數進行比較,插值查詢每次從自適應mid處開始查詢,使用乙個公式來進行下標的定位,通過這個公式可以較為精確的在乙個順序的陣列中大概的定位到要查詢元素的位置.2.插值查詢主要解決的問題就是 比如乙個 1,2,3,4,5,6,7,8 這樣的...