Vue.js 使用了基于 HTML 的模板語(yǔ)法,允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在vue里最常見(jiàn)的數(shù)據(jù)綁定是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值:
<span>Message: {{ value }}</span> // 插值文本無(wú)論何時(shí),綁定的數(shù)據(jù)對(duì)象上 value 屬性發(fā)生了改變,頁(yè)面上都會(huì)響應(yīng)的做出重新渲染。
或者有時(shí)候只是想更新一次,不想每次都更新數(shù)據(jù)了頁(yè)面也重新渲染,可以通過(guò) v-once指令也能實(shí)現(xiàn)一次性的更新:
<span v-once>這個(gè)將不會(huì)改變: {{ value }}</span> // value的值改變了一次后,第二次改變時(shí)就不會(huì)再重新渲染頁(yè)面有時(shí)候你插入的不是單單一個(gè)文本時(shí),比如一個(gè)富文本的值時(shí),它包含了各種文本值和各種原始的html的標(biāo)簽,要完整的顯示到頁(yè)面上,就得使用v-html的指令:
<template> <div v-html="htmlvalue"></div> // 調(diào)用顯示富文本,將會(huì)按照原始的html顯示</template><script>export default { data(){ return{ htmlvalue: '<span style="color:red;">the should be red</span>' // 比如:這是一個(gè)富文本的值 } }}</script>注意:你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn),因?yàn)樗苋菀讓?dǎo)致XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值, 絕不要 對(duì)用戶提供的內(nèi)容使用插值。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選