Le style css de vue scope ne peut pas être appliqué à la solution de contenu v-html

Lorsque nous implémentons l'affichage du contenu sur la page, nous utilisons souvent v-html pour lier le contenu entré par l'utilisateur, et lorsque l'utilisateur entre, en particulier lors de l'utilisation d'images, il ne spécifie souvent pas la taille de l'image. si l'image téléchargée par l'utilisateur est trop grande Si elle est grande, elle sera laide sur la page.

Pour le moment, le style scope de vue ne peut pas être appliqué à ces contenus, mais nous pouvons utiliser le sélecteur de profondeur :

Dans les composants vue, vous pouvez utiliser le sélecteur de profondeur >>> lorsque vous utilisez css ; utilisez /deep/ lorsque vous utilisez less ou sass.

Par exemple:

contenu du modèle :

<div class="contentbody" v-html="news.content">
</div>

style css (moins):

.contentbody{
    margin-top: 53px;
    min-height: 400px;
    max-width: 1038px;
    color:@textColor3;
    /deep/ img{
        width: 100%;
        max-width: 1000px !important;
    }

}

Dans le code ci-dessus, nous contrôlons la largeur de l'image dans le contenu lié par v-html à 100 %, et la largeur maximale ne peut pas être supérieure à 1000px.