Dynamic Styling With Vue.js For Beginners
Hello everyone! This week I have been doing a little more working with Vue to expand my front end horizons, and have been interested in learning about conditional rendering and dynamic styling. This article will be focusing on dynamic styling, which simply put, means to make the styling for each element able to change based on the state of certain variables or conditions.
This is what makes Vue and other front end frameworks so amazing for developers! The ability to detect user input, and then instantly update the necessary elements to reflect that input are super valuable dev tools.
For this article, I will build out a very simple app with Vue that shows a way to change the styling of specific elements upon certain user input happening. Jumping right into it, I’ll be starting with three basic files, a JS file, HTML file, and CSS file all in one project folder. Here is what I’ll be starting with:
index.htmlapp.jsFor now, we’ll leave the styles.css file empty. First, let’s talk about what we are trying to make here. In order to demonstrate dynamic styling, I think a good project would be to create a top navigation bar with multiple tabs. When one tab has been selected via click, that tab will display different styling than the others to show the user which page they are currently on.
We’ll put a fake title to our app (“Tabulous” for humor) in the top left corner, and 3 tabs in the top right corner of our window, which will be “Home”, “Contact Us”, and “About”.
Awesome! Now that we have a plan together, and our boilerplate code is ready to rock, let’s get to work on our nav bar with dynamic styling on the tabs.
Initial Creation and Styling
I’ll make the nav bar container a <section> and add an <h1> title and a <ul> with 3 <li>’s in it for each of the tabs. Here is what that looks like:
(For brevity, when showing the state of index.html, I’ll just be showing the <body> from here out.)
Which is giving us this result:
After adding some styling, we can achieve this result:
Here’s the CSS that made it possible:
Make It Dynamic
Now that we have a styled nav bar with tabs ready to go, we can get started on making the styling dynamic. What is the desired effect? When one tab is “active” we want to see that tab have different style than the other two. Let’s change the background color to something darker, and also change the color and weight of the font to really set it apart from the non-active tabs.
Going back to the app.js file, I’ll need to accomplish a couple things:
- Add a variable in
datafor each tab to keep track of whether it is currently active or not - Add a
methodwhich will set all tabs tofalsebefore switching whichever tab was selected totrue
Let’s take a look at what that looks like and then discuss a bit:
I set isHomeActive to true in because it made sense to me that the home page should be active from the beginning. Now that we have amethod to select a tab (selectTab), we need to go back to the index.html file and connect that ability to a click listener for each tab.
I’m also going to change the regular class property using the v-bind directive, so I can use a ternary statement to change the classes based on the variables in data.
Like so:
You can also use the shorthand for the the <li> Vue properties using @ in place of v-on:, and just a : in place of v-bind:. Which looks like:
Great! we can now toggle the tabs by clicking on them and called the selectTab method, which then allows us to toggle the classes based on which tab is active. But nothing happens!
Of course not because we need to add some CSS for the active class! Here is what I added for the active tab:
Which gives us our desired effect, check it out!
Conclusion
Dynamic styling is an awesome way to make your Vue app more interactive and informative about what your user is doing, and what changed when certain events happen, such as a click.
I hope you learned something from this post and thanks for reading; as always, happy hacking!
