Binding to Attributes & CSS - Vue JS Tutorial

Binding to Attributes & CSS is a free tutorial by Danny Connell from Vue JS course
Link to this course(Special Discount):
https://www.udemy.com/course/quasarframework/?ranMID=39197&ranEAID=Gw%2FETjJoU9M&ranSiteID=Gw_ETjJoU9M-pMkFUh1i4_iHERwRBUMybQ&LSNPUBID=Gw%2FETjJoU9M&utm_source=aff-campaign&utm_medium=udemyads
This is the best Vue JS Course
Course summary:
How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework and Firebase
How to manage the state of your app using Vuex
How to create a back-end for the app using Firebase Realtime Database - including user authentication, reading and writing data
All the essentials of Quasar Framework and VueJS
English [Auto]
How can we add style to our elements conditionally based on stuff that's happening in the data object. Well we can do this using the V bind directive so one thing we could do is on this input field. Let's say we don't want this message to be longer than twenty two characters. And if it is longer than twenty two characters we want to add a class to this input which will change the styles to make it look like an error. This happened Well first of all let's just create a class for that. So down in the Style section I'll just create a class called error and I'll give it a color of red and a background of pink while I'm down here I'm just going to increase the text size on this input and on this button just so we can see what's going on a bit more clearly. So input output to give it a font size of twenty three pixels. That's a bit better. Right. So let's just see how that Eric class looks on the input I just hardcoded in OK so that definitely looks like an error has occurred. So how can we up this class conditionally. Well we can do this using the V by directive. So I was going to make this class V dash bind Cola. And then we want to put the general attribute that we want to bind to. In this case it's going to be the class attribute and then within here we want to single curly braces. And then the name of the class that we want to conditionally out in this case error that we want to add another Cola. And then on this side of the colon we want to specify the condition. So adding this error class and in this case the condition is that we want the message to be longer than twenty two characters so we can use that message the length is great about 20 to now I'm just going to stick a div underneath this input and underneath the bottom to show how many characters we've typed just so we can see what's coming up so I can do that just by using double curly braces and then in there I can just put message like OK so right now it's 22 characters and there's no error. What happens if we add some more characters. You can see the class is being added and the styles are being added too. If I delete the characters the extra characters the error class disappears. Now there is a shorthand way of using v dash bind. You can basically just remove the V dash bind but just leave the semicolon. Now there's all kinds of different ways that we can use this attribute binding and we'll cover that in more detail later there's another way that we can attach style to elements and that's by binding directly to the style attribute and using a computed property to generate that style. So I'm just going to delete this V bind cluster active without it and add one 4D style attribute instead of will bind that to a computed property called error style and we can create this computed property down here error style. Now what we want to do is if the message is longer than twenty two characters then we want to return the error styles so we can just do. If they stop message dot like it straight to the twenty two. Return now we could just return the styles as a string like like this color red background pink. I need to way that we can do this is just by returning a javascript object like this so return color red background. Pink OK. Let's just see that's working. So there's no error message at the moment with twenty two characters. Let's add some more characters. Yeah that's working. Except this time instead of adding a class to this import if you look at the inspector it's actually adding the styles to this directly in these style attribute. Now generally it's probably best to use classes rather than directly injecting styles. Well there might be certain cases where you need to inject style directly such as when you need to change the left or right position of an element or something like that.
Binding to Attributes & CSS Use Quasar, Vue JS 2, Vuex & Firebase to build a Cross Platform, Single Codebase App for Web, iOS, Android, Mac, Windows