Gaya melalui Atribut style dalam Vue

Gaya CSS boleh ditambah secara langsung melalui atribut style. Untuk ini, objek dihantar ke atribut, di mana sifat CSS yang dikehendaki menjadi kunci objek ini, dan nilai sifat CSS yang sepadan menjadi nilai objek ini.

Mari kita warnakan sebarang perenggan dalam warna merah dan tambahkan sempadan hijau sebagai contoh:

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

Sekarang mari kita tetapkan font-size kepada 30px menggantikan sempadan. Oleh kerana objek tidak boleh mempunyai kunci dengan sengkang, kita perlu meletakkannya dalam tanda petik:

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

Anda juga boleh menulis fontSize menggantikan font-size - ini juga akan berfungsi:

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