詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
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)文章
vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06
vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能
這篇文章主要介紹了vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟
這篇文章主要介紹了實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁(yè)面顯示可能就會(huì)顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時(shí)候,會(huì)顯得整個(gè)頁(yè)面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue中獲取this.$refs為undefined的問(wèn)題
這篇文章主要介紹了Vue中獲取this.$refs為undefined的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由
這篇文章主要介紹了vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12

