การจัดสไตล์คอมโพเนนต์ในเฟรมเวิร์ก 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>