Vue 3 представляет новый функционал, который о, v-bind(), для использования стилей без тега style. Мы используем эту функцию для создания односторонней ссылки
между локальными данными и значением CSS.
Под капотом движок Vue использует пользовательские свойства CSS (или CSS переменные) для вычисления динамических стилей, полученных от v-bind(). для
каждых v-bind(), он генерирует хешированное пользовательское свойство (с префиксом --)
и добавляет его в корневой элемент компонента. Все пользовательские свойства добавлены как встроенные статические стили и будут обновляться всякий раз, когда меняется связанное локальный значение данных меняется.
Например, у нас есть компонент, который выводит заголовок и содержит локальное свойство данных, headingStyles. Объект данных headingStyles содержит несколько параметров, таких как marginTop, textAlign и color, указывающих соответствующие свойства CSS:
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Binding with v-bind example',
headingStyles: {
marginTop: '10px',
textAlign: 'center',
color: '#4fc08d',
}
}
}
}
</script>После того, как мы установили стили в секции data, мы можем использовать внутри секции style эти стили:
<style>
h1 {
margin-top: v-bind(headingStyles.marginTop);
text-align: v-bind(headingStyles.textAlign);
color: v-bind(headingStyles.color);
}
</style>Теперь, если вы посмотрите на результат, вы увидите, что стили применились. А если посмотреть инструментами разработчика, мы увидим, каким образом добавлены инлайновые стили:
<h1 style="--60540b83-headingStyles\.marginTop: 10px; --60540b83-headingStyles\.textAlign: center; --60540b83-headingStyles\.color: #4fc08d;">Binding with v-bind example</h1>