web前端vue實現(xiàn)插值文本和輸出原始html
更新時間：2018年01月19日 08:45:14 作者：奇惠小前端
這篇文章主要介紹了web前端vue實現(xiàn)插值文本和輸出原始html，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在vue里最常見的數(shù)據(jù)綁定是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ value }}</span> // 插值文本
無論何時，綁定的數(shù)據(jù)對象上 value 屬性發(fā)生了改變，頁面上都會響應(yīng)的做出重新渲染。
或者有時候只是想更新一次，不想每次都更新數(shù)據(jù)了頁面也重新渲染，可以通過 v-once指令也能實現(xiàn)一次性的更新：
<span v-once>這個將不會改變: {{ value }}</span>
// value的值改變了一次后，第二次改變時就不會再重新渲染頁面
有時候你插入的不是單單一個文本時，比如一個富文本的值時，它包含了各種文本值和各種原始的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>' // 比如：這是一個富文本的值
}
}
}
</script>
注意：你的站點上動態(tài)渲染的任意 HTML 可能會非常危險，因為它很容易導(dǎo)致XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值， 絕不要 對用戶提供的內(nèi)容使用插值。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何利用Vue+ElementUi實現(xiàn)評論功能,結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue引入vuetify框架你需要知道的幾點知識，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
使用Vue.js和Flask來構(gòu)建一個單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個單頁的App的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vant組件庫之tag漸變色不起作用的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue 實現(xiàn)可視化拖拽頁面編輯器的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案2023-01-01
Vue API中setup ref reactive函數(shù)使用教程
setup是用來寫組合式api，內(nèi)部的數(shù)據(jù)和方法需要通過return之后，模板才能使用。在之前vue2中，data返回的數(shù)據(jù)，可以直接進(jìn)行雙向綁定使用，如果我們把setup中數(shù)據(jù)類型直接雙向綁定，發(fā)現(xiàn)變量并不能實時響應(yīng)。接下來就詳細(xì)看看它們的使用2022-12-12
這篇文章主要介紹了vue下axios攔截器token刷新機制的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01