在Vue中如何修改v-html中的樣式

  • css中使用>>>
  • scss中使用::v-deep

1. css

<template>
  <div class="a" v-html="content"></div>
</template>

<script>
import { ref } from 'vue'

export default { 
  setup() {
    let content = ref( 'this is a <a class="b">Test</a>')
  }
  return {
      content
    }
  }
}
</script>

<style scoped>
  .a >>> .b {
    color: red;
  }
</style>

2. scss

<template>
  <div class="a" v-html="content"></div>
</template>

<script>
import { ref } from 'vue'

export default { 
  setup() {
    let content = ref( 'this is a <a class="b">Test</a>')
  }
  return {
      content
    }
  }
}
</script>

<style lang="scss" scoped>
  .a ::v-deep .b {
    color: red;
  }
</style>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言:最近在用vue cli3寫項(xiàng)目,有時(shí)需要微調(diào)子組件樣式 正常情況下,通過(guò)>>> 或/deep/ (深度作用選...
    葶子123閱讀 977評(píng)論 0 0
  • 在學(xué)習(xí) vue 項(xiàng)目的時(shí)候發(fā)現(xiàn),v-html 里面包含的標(biāo)簽無(wú)法設(shè)置樣式 最后發(fā)現(xiàn)兩種解決辦法 這里要是使用 /d...
    給我把胡蘿卜切成肉丁閱讀 5,551評(píng)論 2 3
  • 1. 最近在做項(xiàng)目的時(shí)候碰到了一些需要給v-html下面從富文本傳過(guò)來(lái)的標(biāo)簽設(shè)置樣式的需求,特在此記錄。 2. 如...
    daozun閱讀 5,763評(píng)論 0 3
  • 父子組件的生命周期 父組件Home,子組件List 掛載 銷毀 路由參數(shù)解耦 this.$route.params...
    hellomyshadow閱讀 1,079評(píng)論 0 0
  • 今天感恩節(jié)哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會(huì),身份的轉(zhuǎn)變要...
    余生動(dòng)聽閱讀 10,798評(píng)論 0 11

友情鏈接更多精彩內(nèi)容