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:

Boilerplate index.html
Boilerplate Vue app.js

For 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:

Not quite a nav bar yet!

After adding some styling, we can achieve this result:

That’s a little better!

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:

  1. Add a variable in data for each tab to keep track of whether it is currently active or not
  2. Add a method which will set all tabs to false before switching whichever tab was selected to true

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!

--

--

--

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Storybook 6 Migration Guide

Hire React native developer| Outsource React native developer

For Loops (in Under Two Minutes)

Declarative Charting Library

Simplifying Component Logic in React with Higher-Order Components

What are Tries?

Why You Should Be Storing Remote Data in a Cache (and Not in State)

Lessons Learned at React Conf 2018

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tyler J Funk

Tyler J Funk

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

More from Medium

Bug hunt: Ext JS Simlets and omitting the status code

How To Use Image Element In HTML

Using User Input Fields in JavaScript

Conditional Statement in JS — with examples