Dynamic Styling With Vue.js and CSS

Interacting with a website and watching it change without refreshing the page is key to a user friendly experience. Changing colors is usually a process that’s done by manipulating the DOM with CSS and JavaScript. Vue.js has it’s own ways of doing this as well.

Prerequisites

  • Vue.js downloaded and integrated into your HTML file

The following is a basic template I’m going to use to change the color of a block.

<div id="app">
 <div class="boxes"></div>
</div>

<script>
 new Vue({
   el: "#app",
   data: {
     
   }
 })
</script>

<style>
 .boxes {
 width: 200px;
 height: 200px;
 background-color: gray;
 display: inline-block;
 margin: 20px;
 }
</style>

This template consists of a div that has a class called boxes. In the style tags, the boxes class is called and it generates a gray box in the browser. The goal of this dynamic styling exercise is to change the color of the box when a user clicks on it.  First a new color needs to be generated in the style tags, I’m going to use a light blue, and I’m going to assign it to a class called lightblue, which hasn’t been created yet.

.lightblue {
  background-color: lightblue;
}

In the Vue instance’s data object, a new boolean value needs to be created in order for the DOM to realize that a change has been implemented. I will call this changeColor.

<script>
 new Vue({
   el: "#app",
   data: {
     changeColor: false
   }
 })
</script>

Now in the divs we need to set a click event, and once the click event has occurred we need to pass in the changeColor attribute.

<div id="app">
 <div class="boxes" @click="changeColor = !changeColor" :class="{lightblue: changeColor}"></div>
</div>

The @ symbol is Vue.js’ shorthand way of writing v-on, and click is being passed in as the argument for the v-on directive. Click is being set to a standard form of toggling logic: changeColor = “not” changeColor. This will change the changeColor value from true to false and back again.

The : is short for v-bind, and class is being passed in as the argument for the v-bind directive. When binding a class it looks for an object, so curly braces need to be used. Inside the class object lightblue, the name of the CSS class we created earlier, is used as the object’s key, while changeColor, the true/false variable we created in data is set to the value. This allows the lightblue class to be passed in as data to the box the user is clicking. When you click the box it should change back and forth from gray to light blue.

The full code looks like this.

<div id="app">
 <div class="boxes" @click="changeColor = !changeColor" :class="{lightblue: changeColor}"></div>
</div>

<script>
 new Vue({
   el: "#app",
   data: {
     changeColor: false,
   }
 })
</script>

<style>
 .boxes {
   width: 200px;
   height: 200px;
   background-color: gray;
   display: inline-block;
   margin: 20px;
 }

 .lightblue {
   background-color: lightblue;
 }
</style>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s