vue如何將字符串的一部分處理為html文檔并渲染到頁面
將字符串的一部分處理為html文檔并渲染到頁面
應(yīng)用場景
做搜索功能是有搜索建議模塊，該模塊需要對等于輸入搜索框字符串的字符串進(jìn)行高亮顯示，效果圖如圖所示：
需求概述
將字符串 str = "Hello world hello girls"中的hello添加樣式為圖所示顏色。
渲染核心組件為
<van-cell
v-for="(item, index) in suggestList"
:key="index"
icon="search"
@click="sendResult(item)"
>
<div slot="title">{{item}}</div>
</van-cell>核心思路
將str = "Hello world hello girls" 轉(zhuǎn)換為
<span style="color: blue;">Hello</span> world <span style="color: blue;">hello</span> girls
在 渲染到vue提供的命令v-html內(nèi)就行了 ， 第一種方法核心api為String.replace(),第二種方法核心api為 String.split() 和 Array.join()
第一種方法核心代碼
highlight(str) {
// 正則表達(dá)式//中間的字符只是字符串
// 如果需要動態(tài)創(chuàng)建一個正則表達(dá)式
// new RegExp(str, rules) str是正則字符串，rules是匹配模式寫在字符串中
const reg = new RegExp(this.suggestText, 'gi')
const highStr = str.replace(reg, `<span style="color:#3296fa;">${this.suggestText}</span>`)
return highStr
},我自己一開始想到的是vue提供的filters過濾器，發(fā)現(xiàn)對v-html內(nèi)的內(nèi)容沒有用，并且設(shè)計過濾器使用時this指向了undefined ，后面就直接用函數(shù)包裹了代碼如下:
<van-cell
v-for="(item, index) in suggestList"
:key="index"
icon="search"
@click="sendResult(item)"
>
<div slot="title" v-html="highlight(item)"></div>
</van-cell>第二種辦法的核心代碼
highlight(str) {
const arr = str.split(this.suggestText)
const strHtml = arr.join(`<span style="color:blue">${this.suggestText}</span>`)
return strHtml
},重代碼量來講第二種明顯優(yōu)于第一種方法，但是第二種難以想到用起來也很繞，但效率好代碼少推薦常用
vue和react如何正常渲染一段html字符串
解析data對象中帶有標(biāo)簽的des字段
1.react的方法：dangerouslySetInnerHTMl 屬性
<div dangerouslySetInnerHTML = {{__html:返回的html代碼片段}} ></div>
<div dangerouslySetInnerHTML = {{__html:data.des}} ></div>原理：
1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個屬性，類似于angular的ng-bind；
2.有2個{{}}，第一{}代表jsx語法開始，第二個是代表dangerouslySetInnerHTML接收的是一個對象鍵值對;
3.既可以插入DOM，又可以插入字符串；
2.vue的方法：v-html
<div v-html = "返回的html代碼片段" ></div>
<div v-html = "data.des" >{{data.des}}</div>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多個元素或多個組件之間動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
vue中vite.config.js配置跨域以及環(huán)境配置方式
這篇文章主要介紹了vue中vite.config.js配置跨域以及環(huán)境配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
keep-Alive搭配vue-router實現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實現(xiàn)緩存頁面效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
element多選表格中使用Switch開關(guān)的實現(xiàn)
當(dāng)在做后臺管理系統(tǒng)的時候，會用到用戶的狀態(tài)管理這個功能，本文主要介紹了element多選表格中使用Switch開關(guān)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
Vue+thinkphp5.1+axios實現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了Vue+thinkphp5.1+axios實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù)
這篇文章主要介紹了通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù),文中給大家補充介紹了vue路由開啟keep-alive時的注意點，需要的朋友可以參考下2018-04-04