Типы привязки данных к шаблону в Vue.js
В этой статье мы увидим различные способы привязки данных к шаблону в Vue.js, а также рассмотрим их реализацию на примерах.
Когда мы хотим использовать наши переменные или данные в шаблоне, мы обычно используем синтаксис усов (двойные фигурные скобки). Однако это не разрешено в элементах Vue для HTML. Чтобы использовать элементы HTML, мы должны использовать привязку для подключения к ним наших данных. Привязка данных упрощает привязку данных к шаблону, что помогает отображать их в компоненте представления. Vue предоставляет собственный набор директив, используемых для динамической привязки наших данных к шаблонам.
Связывание текста: используется, когда нам нужно связать содержимое любого HTML в Vue. Синтаксис использования привязки текста заключается в использовании директивы v-text в любом элементе HTML, и ему должно быть назначено свойство данных. Например, данные внутри тега <script> можно отобразить с помощью тега <template>, содержащего директива v-text, имеющая значение, которое должно быть отображено.
Пример . В приведенном ниже примере мы связали данные, которые представляют собой имя , имеющее значение, с директивой v-text , объявленной в теге <div>.
App.vue
<template> <div style="text-align: center; width: 600px"> <h1 style="color: green"> GeeksforGeeks </h1> <b> Data Binding Type </b> </div> <div v-text="name" style="text-align: center"> </div></template> <script> export default { name: "App", data() { return { name: "This content is redered with the help of v-text directive", }; }, };</script> |
Выход:
Мы можем привязать наши данные, т. е. имя к тегу div, используя директиву v-text для динамической привязки наших данных к HTML, чтобы при изменении имени на какое-либо другое значение изменения отражались в шаблоне HTML.
Связывание HTML: это способ хранения некоторых строковых данных в виде любого HTML для использования в любом теге div. Таким образом, содержимое тега div будет соответствовать HTML, который мы к нему привязали. Синтаксис для использования привязки HTML заключается в использовании директивы v-html и указании для нее свойства данных. Директива v-html используется для обновления innerHTML элемента нашими данными.
Пример . В приведенном ниже примере мы заключили строку с тегом <b>. Если бы мы использовали v-текст для привязки данных имени, он показал бы выходные данные вместе с тегами. Но для фактического применения HTML-элемента нам нужен v-html.
App.vue
<template> <div style="text-align: center"> <h1 style="color: green">GeeksforGeeks</h1> <b> Data Binding Type </b> </div> <br /> <div v-html="name" style="text-align: center"> </div></template> <script> export default { name: "App", data() { return { name:"<p>Welcome to <b>GeeksforGeeks</b> Learning. <br>A Computer Science portal for geeks.</p>", }; }, };</script> |
Выход:
Мы даже можем привязать HTML к шаблону, используя директиву v-html , которая будет применять соответствующие теги HTML к связанным данным. Мы можем даже привязывать теги к данным.
Привязка атрибутов: используется для динамической привязки свойств к атрибутам. Мы не можем привязывать атрибуты, используя синтаксис усов «{{ }}» в Vue js. Чтобы установить значение атрибутов с использованием наших данных, нам нужно использовать директиву v-bind. Синтаксис для привязки атрибутов использует v-bind:, а затем следуют соответствующие атрибуты.
Примечание . Атрибуты, которые необходимо связать с помощью v-bind:, должны быть объявлены в операторе возврата данных, иначе будет выдана ошибка.
Пример . В приведенном ниже примере мы привязали свойство disabled к тегу кнопки, disabled указывает, что кнопка недоступна для нажатия и не может быть использована. Мы привязали его к свойству данных isDisabled , которое является логическим значением и установлено как true. Таким образом, мы можем использовать привязку атрибута, чтобы отключить кнопку отправки до тех пор, пока конкретная форма не будет полностью заполнена, и переключить свойство данных, чтобы снова включить его после заполнения формы.
App.vue
<template> <div style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <b> Data Binding Type </b> </div> <br /> <div style="text-align: center"> <p>Subscribe to GBlog Channel</p> <button v-bind:disabled="isDisabled"> Subscribe </button> </div></template> <script> export default { name: "App", data() { return { isDisabled: true, }; }, };</script> |
Выход:
Мы можем привязать атрибуты HTML-элементов с помощью директивы v-bind , которая динамически применяет свойства к соответствующим HTML-элементам. Например, мы можем привязать атрибут disabled к данным с именем isDisabled , чтобы переключать состояние кнопки.
Привязка классов: как и привязка атрибутов, мы можем привязать классы, используемые для CSS, к значениям данных, используя привязку классов. Любому тегу HTML можно присвоить имена классов с помощью директивы v-bind:class . Синтаксис заключается в использовании v-bind: с последующим классом и установкой значения для любой переменной данных. Мы можем иметь несколько классов, добавив их в массив ( v-bind:class = ”[статус, продвижение] “), который применит оба класса CSS к тегу HTML. Привязывая классы к данным, мы можем программно изменять пользовательский интерфейс на основе событий, таких как изменение цвета фона любой кнопки при нажатии на нее, чтобы сделать пользовательский интерфейс интерактивным. Чтобы иметь условные классы, мы можем иметь любое логическое значение, за которым следует &&, чтобы иметь возможность устанавливать класс на основе некоторых условных операторов.
Пример : в приведенном ниже примере мы условно установили класс тега <h2> с isCondition , за которым следует && , где isCondition является истинным , как объявлено в данных, поэтому класс, заключенный в кавычки (продвинутый), будет применен к < тег h2> (мы определили продвигаемый класс в стилях).
Примечание . Классы должны быть объявлены в теге стилей в файле Vue.
App.vue
<template> <h2 v-bind:class="status">Status</h2> <h2 v-bind:class="isCondition && "promoted""> Condition </h2></template> <script> export default { name: "App", data() { return { status: "danger", isCondition: "true", }; }, };</script> <style scoped> .danger { color: red; } .promoted { font-style: italic; }</style> |
Выход:
Мы можем динамически связывать классы для HTML с помощью директивы v-bind и изменять классы на основе некоторых функций или событий. Условные классы также можно использовать с помощью && вместе с логической переменной данных.
Связывание стилей: как и селекторы CSS, мы можем иметь одни и те же стили для разных элементов HTML с помощью связывания стилей и даже динамически изменять стили, когда это необходимо. Как мы знаем, для стилей у нас есть 2 варианта: либо иметь встроенные стили, либо определять их в теге стиля, но мы также можем связать стили с нашими значениями данных, используя привязку стилей. Синтаксис для привязки стилей: v-bind:, за которым следует стиль, и установите стиль для значений в нашем разделе данных. В случае Inline Styling мы можем иметь разные значения данных и устанавливать их, как в обычном HTML. Основное преимущество привязки стиля заключается в том, что мы можем изменить данные программно, что, в свою очередь, изменит применяемые стили, поскольку мы можем динамически изменить стиль для любого класса или идентификатора.
Пример : в приведенном ниже примере мы устанавливаем стиль тега <h2> со свойствами CSS, связанными с нашими данными (цвет, связанный с someColor, который имеет значение оранжевого цвета, размер шрифта, связанный с headerSize, который имеет значение 25). Мы даже можем создать объект данных с ключами в качестве свойств и значений CSS, как показано в теге <h2>, где мы связали стиль с dataStyle, который, в свою очередь, является объектом, имеющим свойства цвета, fontSize и заполнения.
App.vue
<template> <h2 v-bind:style="{ color: someColor, "font-size": headerSize + "px", }" > Inline Styles </h2> <h2 v-bind:style="dataStyle">Data Style</h2></template> <script> export default { name: "App", data() { return { someColor: "orange", headerSize: 25, dataStyle: { color: "orange", fontSize: "50px", padding: "20px", }, }; }, };</script> |
Выход:
Мы также можем применять встроенные стили, используя привязку v-bind, чтобы динамически привязывать данные вместе с любыми статическими значениями к нашим стилям и изменять их в соответствии с любой функцией или алгоритмом. Создайте объект стилей в данных и свяжите его с любым элементом HTML, чтобы сократить количество повторных написаний стилей для каждого элемента. Если мы хотим разделить стили на разные объекты данных, примените несколько объектов, вставив их в скобки [ ] или массивы.
Как видно из вышеизложенного, всякий раз, когда мы хотим выполнить привязку к любым атрибутам HTML, нам нужно использовать v-bind: для этого (например, v-bind:class , v-bind:id , v-bind: style , и т. д.), которые могут повторяться, чтобы иметь v-bind. Итак, мы можем заменить v-bind: только на : (например, :class , :style , :id и т. д.).