vue如何將字符串的一部分處理為html文檔并渲染到頁(yè)面
將字符串的一部分處理為html文檔并渲染到頁(yè)面
應(yīng)用場(chǎng)景
做搜索功能是有搜索建議模塊，該模塊需要對(duì)等于輸入搜索框字符串的字符串進(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á)式//中間的字符只是字符串
// 如果需要?jiǎng)討B(tài)創(chuàng)建一個(gè)正則表達(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過(guò)濾器，發(fā)現(xiàn)對(duì)v-html內(nèi)的內(nèi)容沒(méi)有用，并且設(shè)計(jì)過(guò)濾器使用時(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
},重代碼量來(lái)講第二種明顯優(yōu)于第一種方法，但是第二種難以想到用起來(lái)也很繞，但效率好代碼少推薦常用
vue和react如何正常渲染一段html字符串
解析data對(duì)象中帶有標(biāo)簽的des字段
1.react的方法：dangerouslySetInnerHTMl 屬性
<div dangerouslySetInnerHTML = {{__html:返回的html代碼片段}} ></div>
<div dangerouslySetInnerHTML = {{__html:data.des}} ></div>原理：
1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性，類似于angular的ng-bind；
2.有2個(gè){{}}，第一{}代表jsx語(yǔ)法開始，第二個(gè)是代表dangerouslySetInnerHTML接收的是一個(gè)對(duì)象鍵值對(duì);
3.既可以插入DOM，又可以插入字符串；
2.vue的方法：v-html
<div v-html = "返回的html代碼片段" ></div>
<div v-html = "data.des" >{{data.des}}</div>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中父子組件如何實(shí)現(xiàn)傳值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫(kù)可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
淺談el-table中使用虛擬列表對(duì)對(duì)表格進(jìn)行優(yōu)化
我們會(huì)經(jīng)常使用表格，如果數(shù)據(jù)量大就直接可以分頁(yè)，如果多條可能會(huì)影響表格的卡頓，那么應(yīng)該如何進(jìn)行優(yōu)化，感興趣的可以了解一下2021-08-08
下面小編就為大家分享一篇vue2.0 循環(huán)遍歷加載不同圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue axios獲取token臨時(shí)令牌封裝案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue中使用Ueditor的方法，本文通過(guò)實(shí)例給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口(前端處理方法)
跨域問(wèn)題一直都是很多人比較困擾的問(wèn)題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問(wèn)題同時(shí)請(qǐng)求多個(gè)域名接口的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue開發(fā)之不同瀏覽器的類型判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
下面小編就為大家分享一篇vue判斷input輸入內(nèi)容全是空格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11