Vue Basics: Class and Style Binding

This is the sixth episode of my YouTube channel about Vue basics. If you're new to my channel, please subscribe and hit the bell icon to never miss out on my new tutorials.

In the previous episode, we worked on event handling. Today, we'll focus on class and style binding.

To demonstrate, we'll change the color of a text. Open your text editor and open 'product.vue'. Under the 'variant' div class, add the class 'color box'. Make sure to organize the code for readability.

In the CSS, I added width, height, and border to create a square shape. Below this, add a 'style' attribute and bind it. Apply the background color using the 'variant' color which will show red, white, and black.

Now you should see the color changes on the site. You can remove the text as it's no longer needed.

Next, we want to disable the 'add to cart' button if the product is out of stock. Bind the 'disabled' attribute to the button and disable it if the inventory is less than or equal to zero.

In the CSS, I added a class called 'disable state' to visually disable the button. Bind this class name to the button when the inventory is zero or less. Now the button will look disabled.

If you increase the inventory, the button will become active again. And if it goes back to zero, it will be disabled once more.

To wrap up, in the next session, we'll work on computed properties. Feel free to comment below if you have any questions. Don't forget to like, share, and subscribe to my channel for more videos in the future. You can also check out the link in the description for hosting companies. Thank you and see you soon!

video txt