Στυλισμός στοιχείου στο πλαίσιο Vue

Για τον στυλισμό στοιχείων στο αρχείο του στοιχείου πρέπει να γράψετε την ετικέτα style:

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

Σε αυτήν την ετικέτα μπορείτε να γράφετε κώδικα CSS, ο οποίος θα εφαρμόζεται μόνο στον κώδικα HTML του στοιχείου, και δεν θα εφαρμόζεται πουθενά αλλού. Αυτό έχει γίνει ειδικά για τη διευκόλυνσή σας.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε κάποιες παραγράφους:

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

Ας τις χρωματίσουμε σε κόκκινο:

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