v-bind
este o directiva in VueJS folosita pentru a lega dinamic unul sau mai multe atribute sau o componenta prop de o expresie.
Valori dinamice la atribute HTML
Directiva v-bind
se poate folosi pentru actualizare reactiva a unui atribut din tagul HTML.
- Sintaxa:
v-bind:attribute_name='value'
- Exemplu, setare dinamica a atributului
src dintr-un tag <img>:
<div id='demo'>
<img v-bind:src='img' alt='Image' />
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {img:'/imgs/smile_gift.png'}
});
</script>
VueJS are si prescurtare pentru
v-bind
, se inlocuieste cu caracterul doua-puncte ":", precum in codul urmator.
<img :src='img'/>
Se poate adauga si un obiect cu atribute la un singur
v-bind
.
<tag_name v-bind='{attribute_1:variable_1, attribute_2:variable_2}'>Content</tag_name>
- In urmatorul exemplu setam dinamic atributele
src si
class cu un singur
v-bind
:
<style'>
.st_img {
border: 7px solid #e0e000;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>
<div id='demo'>
<img v-bind='{src:img, class:im_cls}' alt='Image'/>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
img:'/imgs/smile_gift.png',
im_cls:'st_img'
}
});
</script>
v-bind cu HTML style si class
Cand v-bind
e folosit pentru definirea atributelor class
sau style
, accepta tipuri de valoare suplimentare cum ar fi Array sau Obiect.
Exemple cu html style
<div :style="{ fontSize: size + 'px' }"></div>
<div :style='[style_obj1, style_obj2]'></div>
Exemple cu html class
<div :class='{ red: is_red }'></div>
<div :class='[class_a, class_b]'></div>
<div :class='[class_a, { class_b: is_b, class_c: is_c }]'></div>
- Pentru detalii despre
v-bind
cu atributele html style si class, vedeti tutorialul:
Class si Style cu Vue.js
Atribute dinamice cu v-bind
Se pot utiliza si argumente dinamice, adaugate intre paranteze patrate.
- Sintaxa:
<img v-bind:[attr_name]='value'/>
// shorthand
<img :[attr_name]='value'/>
- In exemplul urmator, setam in mod dinamic atributul ID la o imagine:
<style'>
#im_rot {
border: 7px solid #ffbe00;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>
<div id='demo'>
<img :src='img' :[attr]='atr_val' alt='Image'/>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
img:'/imgs/smile_gift.png',
attr:'id',
atr_val:'im_rot'
}
});
</script>
v-bind si Componente
v-bind
se poate folosi pentru a transmite date de la Componenta parinte la elementele din ea, utilizand proprietatea props
.
- Sintaxa:
<component_name :prop='item'></component_name>
- In urmatorul exemplu legam o variabila
text din component cu o variabila de la instanta Vue. Valoarea ei va fi transmisa la elementele din template-ul definit in component:
<div id='demo'>
<comp_h :text='ar_txt[0]'></comp_h>
<comp_h :text='ar_txt[2]'></comp_h>
</div>
<script>
// Define a new component called comp_h
Vue.component('comp_h', {
props: ['text'],
template: '<h3>{{text}}</h3>'
});
//array with data for text in component
const ar_t =['Pacea e buna.', 'Sunt intelept.', 'Imi pastrez si dau pacea mea.'];
// Create a Vue instance
new Vue({
el: '#demo',
data:{
ar_txt: ar_t
}
});
</script>
- Pentru detalii despre Componente in Vue, vedeti tutorialul:
Componente in Vue JS
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius#id {
background-color: #bbfeda;
box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length); // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gustaMe gustan las frutas dulces.
- Imi plac fructele dulci.