vue中v-html妙用及空白行消除方式
更新時間：2023年04月05日 11:40:32 作者：云簪輕撥
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
v-html妙用及空白行消除
類似淘寶的商品詳情中，商品介紹完全是由純圖片組成。
在構(gòu)建代碼時，可以使用循環(huán)將所有的img標簽獲取出來，也可以利用v-html標簽的特性來實現(xiàn)，如上圖，DETAIL字段是商品詳情內(nèi)容，但完全是由一大堆ima構(gòu)成，此時使用v-html可以省去循環(huán)的麻煩，但同時也產(chǎn)生了另一個問題——圖片之間出現(xiàn)了空白行，
如下
要消除這些空白行的存在，可以利用font-size來實現(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要介紹了vue如何通過$router.push傳參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue實現(xiàn)element-ui對話框可拖拽功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)導入json解析成動態(tài)el-table樹表格
本文主要介紹了vue實現(xiàn)導入json解析成動態(tài)el-table樹表格，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要給大家介紹了關(guān)于axios如何取消重復無用的請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用axios具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
一文詳解Vue3的watch是如何實現(xiàn)監(jiān)聽的
watch這個API大家都很熟悉,今天這篇文章小編來帶你搞清楚Vue3的watch是如何實現(xiàn)對響應式數(shù)據(jù)進行監(jiān)聽的,希望對大家有一定的幫助2024-11-11
這篇文章主要介紹了原理深度解析Vue的響應式更新比React快，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了vue3封裝計時器組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3報錯‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報錯,飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報錯‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04