詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
更新時(shí)間：2018年11月22日 10:25:28 作者：honey緣木魚(yú)
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
Vue為v-html中標(biāo)簽添加CSS樣式
<template>
<div class="hello">
<section>
<h2 class="title">{{news.title}}</h2>
<p class="news-time">{{news.datetime}}</p>
<div class="con" v-html="news.dec">
</div>
<button class="back" @click="goBack()">返回列表</button>
</section>
</div>
</template>
當(dāng)我們使用v-html渲染頁(yè)面，使用下面這種方式去修改樣式并沒(méi)有效果，
<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>
解決方案：
當(dāng)我們引入第三方組件或加載html元素時(shí)，想修改下樣式，就可以用以下三種方式：
一.去掉<style scoped>中的scoped
這個(gè)方法不建議使用，會(huì)改變布局
二.定義兩個(gè)style標(biāo)簽，一個(gè)含有scoped屬性，一個(gè)不含有scoped屬性
使用方法為
<style scoped>
.introduction{
width: 100%;
margin-bottom: 3rem;
}
</style>
<style>
.introduction img{
width: 100%;
object-fit: fill;
}
</style>
三.通過(guò) >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他組件的值
使用模板為：
.introduction>>> img{
width: 100%;
object-fit: fill;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 使用Vuex和router的注意事項(xiàng)及操作方法
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項(xiàng)及操作方法,需要的朋友可以參考下2022-12-12
Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁(yè)面空白問(wèn)題的解決方案
這篇文章主要介紹了Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁(yè)面空白問(wèn)題的解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細(xì)的解決方法,并通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過(guò)代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02
vue中el-table合并列的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table合并列的具體實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02