0
votes

VUE.JS - CSS ne fonctionne pas sur l'élément V-HTML

J'essayais de changer la couleur du texte code> de la balise, mais j'ai échoué, je suppose que c'est parce que j'ai utilisé V-HTML pour inclure le code> Texte.

CSS normal n'a pas fonctionné, mais vous pouvez le changer via JavaScript. P>

<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: ""
        }
      ]
    };
  }

html css vue.js

0 commentaires

3 Réponses :

0
votes

Vous pouvez écrire 'CSS interne' comme celui-ci xxx

ou xxx

1 commentaires

Un peu plus de détails sur votre Ans est utile pour les autres.

0
votes

Vous attribuez de la couleur à une variable locale de TXETHREFSOLOLENEARN. Vous pouvez lier le style et attribuer la couleur comme xxx

1 commentaires

Oui, j'utilisais déjà le CSS scopé. Désolé mais je pense que je n'ai pas précisé que je voulais changer la couleur du texte dans la balise '' dans V-HTML, pas le .Description div.

0
votes

Je ne sais pas vraiment comment votre code a l'air mais, vous pouvez le faire comme ceci dans vos données xxx pré>

après cela, vous pouvez simplement l'insérer comme ceci: p>

  <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>

0 commentaires