Компонентро дар фреймворки 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>