vue中v-html妙用及空白行消除方式
更新時(shí)間：2023年04月05日 11:40:32 作者：云簪輕撥
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
v-html妙用及空白行消除
類似淘寶的商品詳情中，商品介紹完全是由純圖片組成。
在構(gòu)建代碼時(shí)，可以使用循環(huán)將所有的img標(biāo)簽獲取出來，也可以利用v-html標(biāo)簽的特性來實(shí)現(xiàn)，如上圖，DETAIL字段是商品詳情內(nèi)容，但完全是由一大堆ima構(gòu)成，此時(shí)使用v-html可以省去循環(huán)的麻煩，但同時(shí)也產(chǎn)生了另一個(gè)問題——圖片之間出現(xiàn)了空白行，
如下
要消除這些空白行的存在，可以利用font-size來實(shí)現(xiàn)
v-html的使用以及搜索詞關(guān)鍵詞高亮
v-html的使用
1、html：
<div v-html="content" />
2、在data中:
content: '<span style="color: red; font-weight: bold">test</span>'
3、效果：
關(guān)鍵詞高亮顯示
1、html:
<div v-html="content" />
2、在data中:
keyWord: 'keyWord',
content: `test test test ${this.keyWord}`.replace(this.keyWord, `<span style="color: red; font-weight: bold">${this.keyWord}</span>`),3、效果：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
前端設(shè)置cookie之vue-cookies使用及說明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-cli2.x舊版本卸載不掉的問題踩坑指南(附Vue腳手架安裝教程)
遇到一個(gè)Vuecli2腳手架卸載不了的問題,查了許多資料說的都比較復(fù)雜,所以下面這篇文章主要給大家介紹了關(guān)于vue-cli2.x舊版本卸載不掉的問題踩坑的相關(guān)資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下2022-07-07
這篇文章主要來和大家詳細(xì)探討一下Vue2中是如何監(jiān)聽數(shù)組的變化的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
淺談vue中$event理解和框架中在包含默認(rèn)值外傳參
這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認(rèn)值外傳參，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08