1. Предисловие
Я полагаю, что все знают, что общим требованием для привязки данных является список элементов операции класса и его встроенный стиль. Поскольку все они являются свойствами, мы можем справиться с ними с помощью v-bind : нам просто нужно рассчитать конечную строку выражения. Тем не менее, сплайсинг струн является неприятной и прост в ошибках. Таким образом, Vue.js специально улучшает его, когда v-bind используется для класса и стиля. Тип результата выражения может быть объектом или массивом в дополнение к строке.
2. Привязать класс HTML
Обратите внимание: хотя вы можете использовать тег для усов для привязки класса, например, class="{{ className }}" , мы не рекомендуем этот метод написания и v-bind:class . Только один из двух может быть выбрана!
Синтаксис объекта
Мы можем передать объект v-bind:class , чтобы динамически переключить класс. Обратите внимание, что v-bind:class Directive может сосуществовать с обычными функциями класса:
<div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> Данные: {isa: true, ISB: false}Выдвинуто как:
<div> </div>
При изменении ISA и ISB список классов будет обновлен соответственно. Например, если ISB станет истинной, список классов станет « static class-a class-b ».
Вы также можете напрямую связать объект в данных:
<div v-bind: class = "classObject"> </div>
Data: {classObject: {'class-A': true, 'class-b': false}}Мы также можем связать вычисленное свойство, которое возвращает объект здесь. Это обычно используемый и мощный режим.
Массив синтаксис
Мы можем передать массив v-bind:class , чтобы применить список классов:
<div v-bind: class = "[classa, classb]">
Data: {classa: 'class-a', classb: 'class-b'}Выдвинуто как:
<div> </div>
Если вы также хотите переключить класс в списке в соответствии с условиями, вы можете использовать тройное выражение:
<div v-bind: class = "[classa, isb? classb: '']">
Этот пример всегда добавляет класс, но Classb только если ISB верен.
2. Привяжите встроенные стили
Синтаксис объекта
Синтаксис объекта v-bind:style очень интуитивно понятен - он выглядит очень похоже на CSS, но на самом деле это объект JavaScript. Названия атрибутов CSS могут быть названы Camelcase или коротким горизонтальным разделением (кебаб-казея):
<div v-bind: style = "{color: ActiveColor, fontsize: fontsize + 'px'}"> </div> Данные: {ActiveColor: 'Red', Fontsize: 30}Обычно лучше связываться непосредственно с объектом стиля, что делает шаблон более ясным:
<div v-bind: style = "styleobject"> </div>
Data: {styleObject: {color: 'red', fontsize: '13px'}}Точно так же синтаксис объекта часто используется в сочетании с вычисленными свойствами возвращаемого объекта.
3. Синтаксис массива
v-bind:style может применить несколько объектов стиля к одному элементу:
<div v-bind: style = "[styleobjecta, styleobjectb]">
Автоматически добавлять префиксы
Когда v-bind:style использует атрибуты CSS, которые требуют префиксов поставщиков, таких как Transform, Vue.js автоматически обнаружит и добавляет соответствующий префикс.
4. Резюме
Выше всего содержит все содержание стилей связующего класса и стилей стиля Vue.js, скомпилированных для вас. Статья введена подробно и имеет определенную справочную учебную ценность. Я надеюсь, что всем будет полезно изучить Vue.js. Редактор также обновит информацию о Vue.js один за другим. Заинтересованные друзья, пожалуйста, продолжайте обращать внимание на wulin.com.