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

更新時(shí)間：2018年01月19日 08:45:14 作者：奇惠小前端

這篇文章主要介紹了web前端vue實(shí)現(xiàn)插值文本和輸出原始html，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
插值

相關(guān)文章

如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06
Vue打包為相對(duì)路徑的具體實(shí)現(xiàn)方法
在Vue.js項(xiàng)目中,構(gòu)建后的資源文件（如CSS、JavaScript文件、圖片等）通常會(huì)被放置在指定的目錄下,為了確保這些文件能夠被正確加載,Vue CLI 提供了配置選項(xiàng)來(lái)指定這些文件的路徑,本文給大家介紹了Vue打包為相對(duì)路徑的具體實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-09-09
Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Vue傳參一籮筐(頁(yè)面、組件)
這篇文章主要介紹了Vue傳參一籮筐(頁(yè)面、組件)，Vue頁(yè)面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue 重置組件到初始狀態(tài)的方法示例
這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
vue-cli中的webpack配置詳解
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中的組件注冊(cè)方法及注意事項(xiàng)
在Vue中，組件是構(gòu)建頁(yè)面的基本單位。通過(guò)組件化開(kāi)發(fā)，可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊(cè)方法包括全局注冊(cè)和局部注冊(cè)兩種方式。同時(shí)，需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問(wèn)題，以實(shí)現(xiàn)更好的組件復(fù)用和開(kāi)發(fā)效率
2023-05-05