Styling af komponenter i Vue-frameworket

For at style komponenter i komponentfilen skal du skrive tagget style:

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

I dette tag kan du skrive CSS-kode, og den vil kun blive anvendt på komponentens HTML-kode, og vil ikke blive anvendt andre steder. Dette er specielt designet for bekvemmelighed.

Lad os se på et eksempel. Antag, at vi har nogle afsnit:

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

Lad os farve dem røde:

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