Атрибут 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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: