Adaugare stiluri CSS in atributul style

Cu v-bind:style se pot defini proprietati de stiluri CSS pentru atributul "style" din tagul html.
- Sintaxa:
<div v-bind:style='{propName:value, otherProp:value}'>content</div>

Daca doriti sa utilizati notatia CSS (cu liniuta '-'), puneti numele proprietatii intre ghilimele:
<div v-bind:style='{"prop-name":value, "other-prop":value}'>content</div>

- Exemplu, mareste si micsoreaza marimea textului (font-size) cu doua butoane:
<div id='demo'>
 <button @click='fontSize++'>Increase font size</button>
 <button @click='fontSize--'>Decrease font size</button>
 <p v-bind:style='{color:color, fontSize:fontSize +"px"}'>Font size is: {{ fontSize }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ color:'#00d', fontSize:12 }
});
</script>

La :style se poate adauga un obiect cu proprietati CSS definit in obiectul "data" din Vue.
- Exemplu:
<div id='demo'>
 <p v-bind:style='styleOb'>Aceasta lume este vindecata atunci cand perceptia este corectata.</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 styleOb:{color:'#00d', fontSize:'20px', fontWeight:700}
 }
});
</script>

Array de Obiecte cu proprietati CSS

La v-bind:style se poate adauga un Array cu obiecte ce contin proprietati CSS.

- Exemplu:
<div id='demo'>
 <p v-bind:style='[baseStyles, overrideStyles]'>Gandul precede perceptia.</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 baseStyles:{color:'#00d', fontSize:'20px', fontWeight:700},
 overrideStyles:{color:'#fe1234'}
 }
});
</script>

Definire class dinamic

Cu expresia v-bind:class se pot adauga clase CSS in mod dinamic la tagurile html.
- Sintaxa:
<div v-bind:class='{class_name: addClass}'>content</div>
class_name e adaugat in atributul class cand valoarea proprietatii addClass e True.
v-bind:class poate coexista cu atributul class adaugat in tagul HTML.

- Exemplu, construim un simplu meniu cu v-for. La clic pe un element din Meniu setam adaugarea unei clase CSS (aici sel_li) la acel element. Folosim v-bind:class sa adaugam clasa sel_li la elementul selectat:
<style>
.m_li {background:#ebebeb; cursor:pointer; display:inline; font-size:20px; margin:4px;}
.sel_li {background:#efef00; color:#00d; text-decoration:underline;}
</style>

<div id='demo'>
<ul>
 <li class='m_li' v-for='li in lists' @click='sel_li =li' v-bind:class='{ sel_li: sel_li ==li}'>
 {{li}}
 </li>
</ul>
</div>

<script>
const menu_li =['Home', 'About', 'Contact'];

var vm = new Vue({
 el: '#demo',
 data:{
 sel_li: menu_li[0],
 lists: menu_li
 }
});
</script>

Se pot comuta mai multe clase, adaugand mai multe elemente in obiect.
- Sintaxa:
<div class='a_clas' v-bind:class='{class_name:addClass, class_2:addCls2}'>content</div>

Clase multiple adaugate intr-un Array

Putem adauga un array la v-bind:class pentru a aplica o lista de clase stabilite in obiectul data.
- HTML:
<div v-bind:class='[active_cls, error_cls]'>Content</div>
- In Vue JS:
data: {
 active_cls: 'active',
 error_cls: 'error_msg'
}
Ceea ce va reda:
<div class='active error_msg'>Content</div>

CSS class in Componente Vue

Cand se foloseste atributul class in tagul unei componente personalizate, acele clase vor fi adaugate in elementul radacina din componenta. Clasele existente vor fi mentinute.

- Un exemplu cu o componenta:
<div id='demo'>
 <comp_test class='cls_comp'></comp_test>
</div>

<script>
Vue.component('comp_test', {
 template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});

var vm = new Vue({el:'#demo'});
</script>
Codul HTML rezultat va fi:
<div class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

- La fel si cu directiva v-bind:class in component:
<div id='demo'>
 <comp_test v-bind:class='[add_cls]'></comp_test>
</div>

<script>
Vue.component('comp_test', {
 template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});

var vm = new Vue({
 el:'#demo',
 data:{add_cls: 'cls_comp'}
});
</script>
Codul HTML rezultat va fi:
<div class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Class si Style cu Vue.js

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (113594)
  2. Curs si Tutoriale JavaScript (15260)
  3. Cursuri limba engleza gratuite si lectii online (28712)
  4. Cursuri Franceza, Germana, Italiana si Rusa (1757)
  5. Prezent perfect - Exercitii si teste incepatori (7195)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2347)
  2. Curs HTML gratuit Tutoriale HTML5 (1688)
  3. Curs si Tutoriale JavaScript (1647)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1601)
  5. Curs CSS Online Tutoriale CSS3 (1484)