#vue #vue3 #sfc #css

В Vue 3 появилась отличная фишка. Вы можете устанавливать значения CSS в Single File Component прямо из переменных. Проще говоря вот так:

<template>
<div class="text">hello</div>
</template>

<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>

<style>
.text {
color: v-bind(color);
}
</style>

Значения можно подставлять как и из data, так и из props, и даже из computed.

Подробнее в документации:
https://vuejs.org/api/sfc-css-features.html#v-bind-in-css