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

всего от 290 руб