การกำหนดสไตล์ผ่านแอตทริบิวต์ style ใน Vue

สามารถเพิ่มสไตล์ CSS ได้โดยตรงผ่าน แอตทริบิวต์ style โดยส่งอ็อบเจกต์เข้าไปในแอตทริบิวต์ ซึ่งคุณสมบัติ CSS ที่ต้องการ จะเป็นคีย์ของอ็อบเจกต์นี้ และค่าของคุณสมบัติ CSS นั้นๆ จะเป็นค่าของอ็อบเจกต์

ลองมาสีแดงให้กับย่อหน้าใดย่อหน้าหนึ่งและเพิ่มเส้นขอบสีเขียว เป็นตัวอย่าง:

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    ข้อความ
  </p>
</template>

ตอนนี้ลองเปลี่ยนจากเส้นขอบเป็นตั้งค่า font-size ให้เป็น 30px เนื่องจากใน อ็อบเจกต์ไม่สามารถมีคีย์ที่มีเครื่องหมายขีดกลางได้ เรา ต้องใส่เครื่องหมายคำพูดครอบมัน:

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    ข้อความ
  </p>
</template>

นอกจากนี้ แทนที่จะเขียน font-size สามารถเขียน เป็น fontSize ก็ได้ ซึ่งจะใช้งานได้เช่นกัน:

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    ข้อความ
  </p>
</template>