Syntax
As mentioned Vue.js can dynamically generate HTML using one of the directives. The “v-bind” directive is used for dynamic generation of HTML element attributes .
|
1 |
v-bind:nekiHtmlAtribut="dataSvojstvo" |
Using this directive we can reactively bind an attribute value to a “data” object:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<img v-bind:src="imageSrc"> <a v-bind:href = "hreflink">...</a> <div v-bind:title="message">...</div> <div v-bind:class="some Class">...</div> <div v-bind:style="{ color:red, min-width: sirina }">...</div> <script> new Vue({ el: '#example', data: { imageSrc: "https://smartdev.software/blog/images/neka-slika.jpg", hreflink: "https://webprogramiranje.org", message: "Some message", nekaKlasa: "podebljano", sirina: "4rem", } }); </script> |
Abbreviated directive writing
This directive v-bind: has an abbreviated syntax represented by a colon :
Example
|
1 |
<a :href="url">...</a> |
v-bind:class
One of the more commonly used versions of this directive is “v-bind:class” which allows dynamically adding classes to the desired HTML element.
a) Simple syntax
With this syntax v-bind:class=”classname” we bind the class name to the selected element.
Example
In this example, we will associate a CSS class name with a reactive variable named “color” using the directive
v-bind:class="color":
See the Pen Binding HTML Classes – axes by Web programming (@chos) on CodePen.
b) Object syntax
This syntax is based on an object whose key is the class name and the value is true or false.
|
1 |
<div v-bind:class="{'classname1': true,'classname2': false,'classname3': true}"></div> |
It should be emphasized that already existing classes on the HTML element will not be bothered by such dynamic addition of classes.
Example
In this example, a variation of the previous syntax is shown, when the inline object is not used, but the variable that represents it. The result of this directive is the addition of the following classes: “ClassName1” and “ClassName3” to the HTML element.
|
1 2 3 4 5 6 7 8 9 |
<div v-bind:class="sveKlaseElementa"></div> data: { sveKlaseElementa: { 'nameClass1': true, 'classname2': false, 'classname3': true } } |
Example
See the Pen Class binding – Object syntax by Web programming (@chos) on CodePen.
Conditional object syntax
Inline conditional expressions can be used in this object syntax:
|
1 |
<li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}"> |
c) Array syntax
This syntax uses square brackets under double quotes, so we need to use single quotes or instead of the class name we use the name of the variable that represents the class v-bind:class="[ variabla, 'naziv-klase']"
|
1 2 3 4 5 6 7 8 9 10 11 |
<div v-bind:class="[classname1, classname2]"> <script> let vm = new Vue({ el: '.container', data: { nazivKlase1: 'class-name-1', nazivKlase2: 'class-name-2' } }); </script> |
Example
See the Pen Toggling Classes with Array Syntax by Web programming (@chos) on CodePen.
NOTE:
In arraysyntax matters the order of the classes in the case of overlapping CSS properties. The value defined with the last class takes precedence. So in the previous example, even if the “bold” option is selected, the “Large and thin text” option will override it because it is further down the line.
Conditional array syntax
If you want the desired class to appear conditionally, we will achieve this using a ternary expression:
Example
|
1 |
v-bind:class="[obicnaKlasa, (page === currentPage) ? uslovnaAktivnaKlasa : '']" |
Example
See the Pen Class bindinidg – use of inline if inside the array by Web programming (@chos) on CodePen.
d) Mixed syntax
It is possible to mix different syntaxes, in which case the class name in the string must be enclosed in single quotes:
|
1 |
<div class="box" v-bind:class="[color, {podebljano: istinitost}, 'add-margin']"> |
Example
See the Pen WdmBWx by Web programming (@chos) on CodePen.
v-bind:style
To add styles inline to a single HTML element, the Vue.js directive v-bind:style is used. If necessary, this directive even adds vendor prefixes to the CSS property (as an autoprefixer).
Inline binding of the style attribute with the v-bind:style directive uses object syntax. The name of the CSS property is used for the key, and the value of that CSS property is used for the value. The key can be written in the form of so-called “dash-case” syntax (but it must be in single quotes because dash is not a valid value as a property name in JavaScript) or the so-called “CamelCase” which the JavaScript compiler will convert to “dash-case” syntax (eg fontSize to font-size).
|
1 2 3 4 5 6 7 8 9 10 |
<div v-bind:style="{ 'background-color': activeColor, fontSize: fontSize + 'px' }"></div> <script> let vm = new Vue({ data: { activeColor: 'red', fontSize: 30 } }); </script> |
or put everything in an object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div v-bind:style="styleObject"></div> <script> let vm = new Vue({ computed: { styleObject: function (){ return { color: 'red', fontSize: '13px' } } }); </script> |
Example
See the Pen Binnding inline styles – Object syntax by Web programming (@chos) on CodePen.
Array of objects
Using this directive we can also apply multiple style objects to the same element:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div v-bind:style="[{color: 'red',fontSize: '15px'}, styleObjectB, styleObjectC]"></div> <script> data: { sirina: 30px, styleObjectB: { fontSize: '50px' } }, computed: { styleObjectC: function (){ return { width: this.sirina + px } } } </script> |