Распространенным требованием для привязки данных является список классов операционных элементов и его встроенный стиль. Поскольку они все атрибуты, мы можем справиться с ними с помощью V-Bind: просто рассчитайте конечную строку выражения. Тем не менее, сплайсинг струн является неприятной и прост в ошибках. Следовательно, Vue.js специально улучшает его, когда V-Bind используется для класса и стиля. Тип результата выражения может быть объектом или массивом в дополнение к строке.
Связывать класс HTML
Хотя вы можете использовать тег для усов для привязки, например, `{ % raw %} class =" {{classname}} "{ % endraw %}`, мы не рекомендуем этот метод написания и `v-bind: class`. Только один из двух может быть выбрана!
Синтаксис объекта
Мы можем передать объект V-Bind: класс, чтобы динамически переключить класс. Обратите внимание, что V-Bind: Class Directive может сосуществовать с обычными функциями класса:
<div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> data: {isa: true, isb: false}Выдвинуто как:
<div> </div>
При изменении ISA и ISB список классов будет обновлен соответственно. Например, если ISB станет истинной, список классов станет «статическим классом-а класса-B».
Вы также можете напрямую связать объект в данных:
<div v-bind: class = "classobject"> </div> data: {classObject: {'class-A': true, 'class-b': false}}Мы также можем связать вычисленное свойство, которое возвращает объект здесь. Это обычно используемый и мощный режим.
Массив синтаксис
Мы можем передать массив V-Bind: класс, чтобы применить список классов:
<div v-bind: class = "[classa, classb]"> data: {classa: 'class-a', classb: 'class-b'}Выдвинуто как:
<div> </div>
Если вы также хотите переключить класс в списке в соответствии с условиями, вы можете использовать тройное выражение:
<div v-bind: class = "[classa, isb? classb: '']">
Этот пример всегда добавляет класс, но Classb только если ISB верен.
Тем не менее, написание этого пути немного громоздко, когда есть несколько условных классов. В 1.0.19+ синтаксис объекта можно использовать в синтаксисе массива:
<div v-bind: class = "[classa, {classb: isb, classc: isc}]">
Связывать встроенные стили
Синтаксис объекта
Синтаксис объекта V -Bind: стиль очень интуитивно понятен - он выглядит очень похоже на CSS, но на самом деле это объект JavaScript. Названия атрибутов CSS могут быть названы Camelcase или коротким горизонтальным разделением (кебаб-казея):
<div v-bind: style = "{color: ActiveColor, fontsize: fontsize + 'px'}"> </div> Data: {ActiveColor: 'Red', Fontsize: 30}Обычно лучше связываться непосредственно с объектом стиля, что делает шаблон более ясным:
<div v-bind: style = "styleobject"> </div> data: {styleobject: {color: 'red', fontsize: '13px'}}Точно так же синтаксис объекта часто используется в сочетании с вычисленными свойствами возвращаемого объекта.
Массив синтаксис
V-Bind: Синтаксис массива в стиле может применить несколько объектов стиля к одному элементу:
<div v-bind: style = "[styleobjecta, styleobjectb]">
Автоматически добавлять префиксы
Когда V-Bind: Style использует атрибуты CSS, которые требуют префиксов поставщиков, таких как Transform, Vue.js автоматически обнаружит и добавляет соответствующий префикс.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Для получения дополнительных учебных пособий по обучению VUE, пожалуйста, прочитайте специальную тему "Vue Practical Rutorial"
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.