Class si Style cu Vue.js

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>

<<-Componente in Vue JS -- Utilizare v-model in campuri ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Clic pe tag-ul care creaza celula in tabel.

<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>

Indicati proprietatea CSS care adauga o imagine pentru fundal

background-color background-image color

h3 {
  background-image: url("image.jpg");
}

Ce instructiune se foloseste la parcugerea elementelor unui Array?

for() [) object()

var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };

Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.

for() foreach() if()

$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }

Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?

meek good beautiful

He is so kind and meek.
- El este atat de amabil si bland.

Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?

hermoso fuerte manso

Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.