Στυλισμός μέσω του χαρακτηριστικού style στο Vue

Τα CSS στυλ μπορούν να προστεθούν απευθείας μέσω του χαρακτηριστικού style. Για αυτό, στο χαρακτηριστικό περνάται ένα αντικείμενο, στο οποίο οι επιθυμητές ιδιότητες CSS πρέπει να είναι τα κλειδιά αυτού του αντικειμένου, και οι αντίστοιχες τιμές των ιδιοτήτων CSS - οι τιμές αυτού του αντικειμένου.

Ας βάψουμε για παράδειγμα κάποια παράγραφο με κόκκινο χρώμα και ας προσθέσουμε πράσινο περίγραμμα χρώματος:

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

Ας του ορίσουμε τώρα αντί για περίγραμμα font-size σε 30px. Εφόσον στο αντικείμενο δεν μπορεί να υπάρχει κλειδί με παύλα, εμείς πρέπει να το βάλουμε σε εισαγωγικά:

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

Μπορεί επίσης αντί για font-size να γραφεί fontSize - αυτό επίσης θα λειτουργεί:

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>