欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

web前端vue實(shí)現(xiàn)插值文本和輸出原始html

 更新時(shí)間：2018年01月19日 08:45:14   作者：奇惠小前端  
這篇文章主要介紹了web前端vue實(shí)現(xiàn)插值文本和輸出原始html，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。

在vue里最常見的數(shù)據(jù)綁定是使用“Mustache”語法 (雙大括號) 的文本插值：

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

無論何時(shí)，綁定的數(shù)據(jù)對象上 value 屬性發(fā)生了改變，頁面上都會響應(yīng)的做出重新渲染。

或者有時(shí)候只是想更新一次，不想每次都更新數(shù)據(jù)了頁面也重新渲染，可以通過 v-once指令也能實(shí)現(xiàn)一次性的更新：

<span v-once>這個(gè)將不會改變: {{ value }}</span> 
// value的值改變了一次后，第二次改變時(shí)就不會再重新渲染頁面

有時(shí)候你插入的不是單單一個(gè)文本時(shí)，比如一個(gè)富文本的值時(shí)，它包含了各種文本值和各種原始的html的標(biāo)簽，要完整的顯示到頁面上，就得使用v-html的指令：

<template>
 <div v-html="htmlvalue"></div> // 調(diào)用顯示富文本，將會按照原始的html顯示
</template>
<script>
export default {
 data(){
 return{
  htmlvalue: '<span style="color:red;">the should be red</span>' // 比如：這是一個(gè)富文本的值
 }
 }
}
</script>

注意：你的站點(diǎn)上動態(tài)渲染的任意 HTML 可能會非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值， 絕不要 對用戶提供的內(nèi)容使用插值。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論