Stilering van 'n Komponent in die Vue-raamwerk

Om komponente te styleer, moet jy die style-tag in die komponentlêer skryf:

App.vue<script>
  
</script>
<template>
  
</template>
<style>
  
</style>

In hierdie tag kan jy CSS-kode skryf, en dit sal slegs op die HTML-kode van die komponent toegepas word, en nie daarbuite nie. Dit is spesifiek vir gerief gedoen.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n paar paragrawe:

App.vue<template>
  <p>
    1
  </p>
  <p>
    2
  </p>
</template>

Kom ons maak hulle rooi:

App.vue<style>
  p {
    color: red;
  }
</style>