vue中v-html妙用及空白行消除方式

Posted on by

v-html妙用及空白行消除

類似淘寶的商品詳情中，商品介紹完全是由純圖片組成。

在構建代碼時，可以使用循環將所有的img標簽獲取出來，也可以利用v-html標簽的特性來實現，如上圖，DETAIL字段是商品詳情內容，但完全是由一大堆ima構成，此時使用v-html可以省去循環的麻煩，但同時也產生瞭另一個問題——圖片之間出現瞭空白行，

如下

要消除這些空白行的存在，可以利用font-size來實現

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、效果：

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：