Vue.js--CSS 不适用于 v-html 元素

Question

我试图更改<a>标签文本的颜色，但失败了，我猜这是因为我使用 v-html 来包含<a>文本。

普通的 css 不起作用，但您可以通过 javaScript 更改它。

 methods: {
    changeVhtmlStyle () {
      let textHrefSoloLearn = document.getElementsByClassName('description')[0].childNodes[0]
      console.log (textHrefSoloLearn)
      textHrefSoloLearn.style.color = '#000000'
    }
  },

  mounted: function() {
    this.changeVhtmlStyle()
  }

我想知道是否有一种简单的方法可以做到这一点。

<div class="description" v-html="education.description"></div>



data() {
    return {
      educations: [
        {
          degree: "web front-end developing",
          school: "sololearn",
          schoolWebsite: "https://www.sololearn.com",
          time: "2018/8 ~ present",
          description:
            "<a href='https://www.sololearn.com/'>Sololearn</a> is the largest online community of mobile code learners.<br /><br /> Course finished: <b>HTML</b>, <b>CSS</b>, <b>JS</b>, <b>Jquery</b><br /><br/>Other skills: <b>Vue.js</b>"
        },

        {
          degree: "Educational English",
          school: "Huaiyin normal university",
          schoolWebsite: "http://www.hytc.edu.cn/",
          time: "2011/9 - 2015/6",
          description: ""
        }
      ]
    };
  }

Answer 1

我真的不知道你的代码是什么样子，但是你可以在你的数据中这样做

  data() {
    return {
      richText:
        '<style scoped>.section-title{color:#ffecd1;font-size:64px;font-weight:700;margin-bottom:32px}.img-header{width:480px;height:auto;object-fit:cover;border-radius:16px;padding-right:16px}.section-motto{color:#ffecd1;font-size:28px;line-height:1.7em;margin-bottom:64px}.text-wrapper{background-color:#932f2d;border-radius:16px;padding:24px}.section-description{color:#ffecd1;font-size:24px;line-height:1.7em}</style><div class="section-title-wrapper"><h2 class="section-title">Ormawa</h2><p class="section-motto">Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam undesapiente quos cum.</p></div><div class="row d-flex align-items-center"><div class="col-4 col-md-4 col-12"><img class="img-header" src="https://via.placeholder.com/400x200" alt="ukm-cover" /></div><div class="col-lg-8 col-md-8 col-12 text-left"><div class="text-wrapper"><p class="section-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit.Eveniet molestiae iste quod blanditiis laborum fugiat odit earumvoluptatem impedit, neque, et accusantium possimus animidoloribus modi in totam eligendi explicabo.</p></div></div></div>'
    };
  }

之后，您可以像这样插入它：

<template>
 <div>
  <div v-html="richText"></div>
 </div>
</template>

如果你感到困惑，对于细节，我只是在富文本中添加一个<style scoped></style> 。 在正常情况下，我的风格看起来像这样：

<style scoped>
  .section-title-wrapper {
    text-align: left;
  }

  .section-title {
    color: #ffecd1;
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .img-header {
    width: 480px;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    padding-right: 16px;
  }

  .section-motto {
    color: #ffecd1;
    font-size: 28px;
    line-height: 1.7em;
    margin-bottom: 64px;
  }

  .text-wrapper {
    background-color: rgb(147, 47, 45);
    border-radius: 16px;
    padding: 24px;
  }

  .section-description {
    color: #ffecd1;
    font-size: 24px;
    line-height: 1.7em;
  }
</style>

我的富文本将如下所示：

  <div class="section-title-wrapper">
    <h2 class="section-title">Ormawa</h2>
    <p class="section-motto">
      Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam unde
      sapiente quos cum.
    </p>
  </div>

  <div class="row d-flex align-items-center">
    <div class="col-4 col-md-4 col-12">
      <img
           class="img-header"
           src="https://via.placeholder.com/400x200"
           alt="ukm-cover"
           />
    </div>
    <div class="col-lg-8 col-md-8 col-12 text-left">
      <div class="text-wrapper">
        <p class="section-description">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet molestiae iste quod blanditiis laborum fugiat odit earum
          voluptatem impedit, neque, et accusantium possimus animi
          doloribus modi in totam eligendi explicabo.
        </p>
      </div>
    </div>
  </div>

是的，如果您从本地资产输入图像，它现在不起作用，我仍然没有找到原因，但最好使用外部链接。

Answer 2

您可以像这样编写“内部 css”

<style scoped>
    .parent /deep/ .child{}
</style>

或者

<style scoped>
    .description /deep/ {color:#000}
</style>

Answer 3

您正在为局部作用域变量 txetHrefSoloLearn 分配颜色。 您可以绑定样式并为其分配颜色

<div class="description" :style="txetHrefColor" v-html="education.description"></div>

data:{
   textHrefColor:null 
}

methods: {
changeVhtmlStyle:function() {
  this.textHrefColor='#000000';
    }
},

mounted: function() {
this.changeVhtmlStyle()
}