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