Как добиться привязки стилей в Vue.js?

Стили привязки в Vue.js так же похожи, как Классы привязки. В предыдущем посте мы видели, как связать классы CSS с HTML. Для начала давайте узнаем, как v-bind приходит на помощь. Простой способ использовать v-bind:styleв сочетании, чтобы начать шоу.

Простая привязка стилей в Vue.js

Взгляните на код ниже. Этот код поможет вам привязать стиль непосредственно к элементу DOM и совершенно не затруднит работу. Вы можете связать любое свойство, используя этот синтаксис.

Вы читали замечательную статью Связывание классов в Vue.js?

HTML

<div v-bind:style="{color:'red',fontSize:'25px'}">
    Simple Style Binding 
  </div>

Код Vue.js, связанный с этим, также является общим, когда вы просто определяете приложение, и оно работает как таковое.

Vue.js

var app = new Vue({
  el: '#app',
  data: {
  }
});

Этот синтаксис поставляется из коробки для любого приложения Vue.js.

Связывание стилей на основе объектов в Vue.js

В привязке стиля на основе объекта вам просто нужно внедрить свойства стиля элемента в качестве его свойства данных. Вы вполне можете сделать его объектом для дальнейшего экстернализации и обобщения кода. Давайте посмотрим на это в действии.

HTML

<div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">
    Style binding using property Values
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    textColor: 'green',
    fontSize: 30,
  }
});

Приведенный выше код приводит к внешним свойствам, и эти свойства теперь управляются самим компонентом. Они могут быть дополнительно экстернализированы для создания компонента, который берет эти свойства от какого-либо другого компонента. Чтобы узнать больше о компонентах, ознакомьтесь с руководством по списку дел. Вы также можете взглянуть на Глобальную шину событий, чтобы сделать больше взаимодействия компонентов. Теперь давайте посмотрим, как мы можем экстернализовать весь объект как свойство и немного изменить код.

HTML

<div v-bind:style="styleObject">
    Style binding using Object as property
  </div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'yellow',
      fontSize: '50px'
    }
  }
});

Приведенный выше код также дает тот же эффект. Это еще больше упростило код шаблона Vue.js и сделало его чище. Таким образом, вы также можете иметь хороший контроль над свойством данных и правильно управлять им.

Синтаксис на основе массива для привязки стилей в Vue.js

Последний метод привязки — это привязка на основе массива. Эта привязка стиля действительно полезна в различных ситуациях, когда можно добавлять или удалять различные свойства из стиля. Вы можете объединить несколько объектов стиля вместе, чтобы связать вещи. Давайте посмотрим на его структуру.

HTML

<div v-bind:style="[styleObject,textStyle]">
    Array Syntax for Adding Style
  </div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'yellow',
      fontSize: '50px'
    },
    textStyle: {
      fontWeight: 'bold',
      color: 'blue !important'
    }
  }
});

Как мы видим приведенный выше код, можно работать с ним, чтобы управлять несколькими стилями. Вы можете манипулировать свойствами HTML, используя это.

ПРИМЕЧАНИЕ.Vue имеет возможность автоматически добавлять префиксы к префиксам поставщиков, если вы добавили свойство, которое требует этого.

Вывод

Давайте подведем итог, просмотрев полный пример приложения на JSFiddle, как мы это делаем большую часть времени.

Это рабочий образец кода, и вы можете ознакомиться с различными вариантами вышеупомянутого кода. Мы рассмотрели три наиболее популярных формата привязки стилей. Посмотрите и дайте нам знать ваше мнение об Учебнике.

Веб-серия Vue JS BASICS

Первоначально опубликовано в The Web Juice.