v-bind:style
se pot defini proprietati de stiluri CSS pentru atributul "style" din tagul html.<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>
:style
se poate adauga un obiect cu proprietati CSS definit in obiectul "data" din Vue.<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>
La v-bind:style
se poate adauga un Array cu obiecte ce contin proprietati CSS.
<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>
v-bind:class
se pot adauga clase CSS in mod dinamic la tagurile html.class
cand valoarea proprietatii addClass e True.v-bind:class
poate coexista cu atributul class
adaugat in tagul HTML.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>
v-bind:class
pentru a aplica o lista de clase stabilite in obiectul data.<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:
class
in tagul unei componente personalizate, acele clase vor fi adaugate in elementul radacina din componenta. Clasele existente vor fi mentinute.<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:
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:
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 { padding: 2px 0.2em; }
// preia primul Div cu class="cls", si afiseaza continutul var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }
We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.