Vue JS 2 Tutorial #10 - Dynamic CSS Classes

Hey all, in this Vue JS tutorial I'll show you how we can apply dynamic CSS classes to our elements using data binding.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[_a-g_]

I was at Vue Mastery Lession7 and got confused by whatever the content it'd talked about. this video has definitely explained what I was puzzled about. big thank you. great work too. simple, plain and straight to the point.

[tieuwest]

I have watched your videos for two days and it helps a beginner like me a lot to get to know Vue. Thank you so much. I watched some crash course videos before on Vue but you are the best.

[twerkstudio]

i intentional clicked on all ads that apear on your videos, because thats the only way i can pay you bro

[samuelpimenta]

If this is his free content imagine the paid ones...

[tabedenisdeon]

I love these channel thank you so much you have are the best

[jaredlising-simplybrewedph]

span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.available span {
background: green;
}
.nearby span:after {
content: 'nearby';
margin-left: 10px;
}

[cheriecheung]

thank you so much. you make it so easy to digest.

[pawieplays]

Awesome tutorial man. Hope you can do a CRUD using VueJs2!

[alexyap]

any chance you'll get a laravel 5.4 + vue js 2 tutorial up in the future?

[mariannehartigan]

Is there any way to assign a class name using the object id from the database? So a div would have a class that equals a value from the database, not just booleans.

[sebinsong]

I've come back here again from custom directive tutorial to see if something is possible. what I'm wondering is if it's possible to refer to the class object (i.e. {available: true, nearby: false}) via 'el' parameter of the custom directive. for example,

Vue.directive('theme', {
bind(el, binding, vnode) {
el.class = { a: ..., b: .... }
}
})

is this possible? Or should we use the el parameter only as a read-only purpose?

[thismujahid]

It would have been better if you changed the name of the class to something other than the name of the variable because I was confused about what is the variable and what is the class, but else this is good

[DJalem]

Can we use compClasses for example show/hide mobile menu?

[eufraniodiogo]

Man I don't if you will see this comment but I need to say thanks dude!

[Keyakina]

You can only do this with main.js right? When it's a global variable

[ericlim]

Can anyone help me why or when do you need to use the single pair of curly braces

[amberdev]

Kindly clear my doubt.
this is my compClasses function here major and minor are the names for css class i have passed in css file, valA and valB are data object properties with initial value set to false and are toggled on a click event. Thid is not working..

compClasses:function()
{
return
{
major : this.valA,
minor : this.valB
}


}


the same thing works when i place the curly bracket right next to return. as shown below kindly explain.
compClasses:function()
{
return{
major : this.valA,
minor : this.valB
}


}

[darya]

Why does available = !available on click toggle the class? Shouldn't it just make available false and then leave it since nothing is saying to change to back to true on click again?

[sebastianbasic]

Why did you name the class and the boolean the same? It's confusing.

[mahmoudelkhashab]

At 4:56 why didn't the class attribute delete it self??