v-bind:style
we can dynamically set CSS style properties in html tags.<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>
<div id='demo'> <p v-bind:style='styleOb'>This world is cured when the perception is corrected.</p> </div> <script> var vm = new Vue({ el: '#demo', data:{ styleOb:{color:'#00d', fontSize:'20px', fontWeight:700} } }); </script>
We can add an array with multiple style objects to the v-bind:style
directive
<div id='demo'> <p v-bind:style='[baseStyles, overrideStyles]'>The thought precedes the perception.</p> </div> <script> var vm = new Vue({ el: '#demo', data:{ baseStyles:{color:'#00d', fontSize:'20px', fontWeight:700}, overrideStyles:{color:'#fe1234'} } }); </script>
v-bind:class
we can dynamically set CSS clases to html elements.class
attribute when the addClass property is True.v-bind:class
can also coexist with the plain class
attribute.v-for
. When an item in Menu is clicked, we set to be added a CSS class (here sel_li) to the current item. We use v-bind:class
to set sel_li class to selected item:
<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
to apply a list of classes from data object.<div v-bind:class='[active_cls, error_cls]'>Content</div>- In Vue JS:
data: { active_cls: 'active', error_cls: 'error_msg' }Which will render:
class
attribute on a custom component, those classes will be added to the component's root element. Existing classes will not be overwritten.<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>The rendered HTML will be:
<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>The rendered HTML will be:
Some content ... <hr /> Content under line ...
h2 { color: #cbdafb; }
var str = "Web courses - http://CoursesWeb.net/"; if(str.indexOf("http://") == -1) alert("http:// isn`t in string"); else alert("http:// is in string");
$str = "apple,banana,melon,pear"; $arr = explode(",", $str); var_export($arr); // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")