1. 程式人生 > >Vue裡給v-html元素新增樣式

Vue裡給v-html元素新增樣式

在Vue元件中,我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。

<template>
<div class="foo">
<div v-html="myHtml"></div>
</div>
</template>
<style scoped>
.foo { height: 300px; }
</style>
1
2
3
4
5
6
7
8
而如果在元件中使用了v-html,要為myHtml中的標籤新增CSS樣式,我們需要在寫樣式的時候新增>>>:

.foo >>> img { max-width: 100%; }
1
這樣,編譯時以上CSS才會被編譯為

.foo[data-v-xxxxxxx] img { max-width: 100%; }
---------------------
作者:嶽小哥
來源:CSDN
原文:https://blog.csdn.net/yanby921005/article/details/79963722
版權宣告:本文為博主原創文章,轉載請附上博文連結!