Атрибут style в Vue

В статье "CSS классы в Vue" мы рассмотрели несколько примеров изменения значения атрибута "class" с помощью директивы "v-bind". Но с помощью этой же директивы можно изменять значения атрибута style, используя "v-bind:style".

Давайте попробуем рассмотреть способ работы со стилями. С одним или несколькими одновременно. Фактически, мы возьмём примеры из предыдущей статьи и немного изменим их.

Использование одного или нескольких стилей

<div id="application">
   <div v-bind:style="{'color': style1, 'font-size': style2 + 'px'}">Текст</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         style1: 'red',
         style2: 14,
      },
   });
</script>

Если запустить такой код, то на странице можно будет увидеть:

<div id="application">
   <div style="color: red; font-size: 14 px;">Текст</div>
</div>

При изменении свойств "style1" и "style2" их новые значения будут автоматически подставляться в атрибут style. Точно так же, как это происходит с классами.

Обратите внимание, что если в названии свойства стиля есть тире "-", то его надо заключать в кавычки. Поэтому в примере мы написали 'font-size' в кавычках.

Наборы стилей

Как и с классами, в Vue умеет выгружать все стили их свойства объекта. То есть нет нужды вручную перечислять все свойства через запятую и писать их значения. Достаточно указать всё это внутри объекта. К примеру, так:

<div id="application">
   <div v-bind:style="{ styles }">Текст</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         styles: {
            'color': 'red',
            'font-size': '14 px',
         },
      },
   });
</script>

Результат выполнения этого кода будет полностью аналогичен результату предыдущего:

<div id="application">
   <div style="color: red; font-size: 14 px;">Текст</div>
</div>

Таким образом сокращается количество программного кода, становится легче его модифицировать.

Подобный трюк можно сделать и с несколькими наборами стилей. Но тогда в значении атрибута "style" необходимо поставить квадратные скобки вместо фигурных. И перечислить там все ключи объекта через запятую:

<div id="application">
   <div v-bind:style="[ styles1, styles2 ]">Текст</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         styles1: {
            'color': 'red',
            'font-size': '14 px',
         },
         styles2: {
            'font-weight': 'bold',
         },
      },
   });
</script>

При таком коде будут применены все свойства из наборов "styles1" и "styles2":

<div id="application">
   <div style="color: red; font-size: 14 px; font-weight: bold;">Текст</div>
</div>