溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue為v-html中標簽添加CSS樣式
<template>
<div class="hello">
<section>
<h3 class="title">{{news.title}}</h3>
<p class="news-time">{{news.datetime}}</p>
<div class="con" v-html="news.dec">
</div>
<button class="back" @click="goBack()">返回列表</button>
</section>
</div>
</template>
當我們使用v-html渲染頁面，使用下面這種方式去修改樣式并沒有效果，
<style scoped lang="less">
.con{
p {
font-size: 14px;
line-height: 28px;
text-align: left;
color: rgb(238, 238, 238);
color: #585858;
text-indent: 2em;
}
}
</style>
解決方案：
當我們引入第三方組件或加載html元素時，想修改下樣式，就可以用以下三種方式：
一.去掉<style scoped>中的scoped
這個方法不建議使用，會改變布局
二.定義兩個style標簽，一個含有scoped屬性，一個不含有scoped屬性
使用方法為
<style scoped>
.introduction{
width: 100%;
margin-bottom: 3rem;
}
</style>
<style>
.introduction img{
width: 100%;
object-fit: fill;
}
</style>
三.通過 >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他組件的值
使用模板為：
.introduction>>> img{
width: 100%;
object-fit: fill;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
