Vue JS — Dynamic Classes — Vue From The TOP

Was the image too big? Sorry about that. I really liked it, so I couldn’t help it.

Anyways, let's get back to business, today we are going to look into dynamic classes with Vue JS. In the last post, we looked into data binding. If you missed the last post don't worry click the link below and my assistant will navigate you there. 😆

Vue From The TOP — Data Binding

As I said, Data Binding in Vue is super simple, now since you are equipped with the knowledge of how to perform the art of data binding in Vue JS, let's look into how to create dynamic classes.

Dynamic Styling

Let’s say we are building a page for our user, where our user gets to enter their favorite color and automatically the whole background of the page changes to that color. Sounds cool right?

So, in this case, the property “background” of the div’s style has to be dynamic. Meaning it should change according to what the user has entered. Now we could it do it in two ways. One is, of course, using Javascript, and the other is using Vue’s Data Binding.

You can bind a style property and dynamically change it however you wish. Let’s go ahead and build that.

Now in our app.vue, we should see something like this.

<template>
<div id="app">
</div>
</template>

<script>
export default {

};
</script>
<style>
#app {
height: 100vh;
background: white;
}
</style>

Alright, now we need an input field to take in input from the user. Let us not forget to add the associated data property to it using v-model — as we discussed in the first lecture.

v-model is a two-way data binding directive. Whereas v-bind is a one-way data-binding directive.

<template>
<div id="app">
<input v-model="color" type="text">
</div>
</template>
<script>
export default {
name: "App",
data(){
return{
color: 'white'
}
},
};
</script>
<style>
#app {
height: 100vh;
background: white;
}
</style>

Sweet, now let's assign this “color” property to the background of the div. We can do that as follows.

<template>
<div :style="{background: color}" id="app">
<input v-model="color" type="text">
</div>
</template>

That’s it, the “color” data property has been assigned to the background style of the div and it changes whenever the user enters any of the valid colors. Here is the working sandbox.

Vue JS CodeSandbox

Dynamic Classes

Great, now that you understand how to implement dynamic styles to HTML elements, we can now proceed further to implement dynamic classes. In the same way as styling, implementing dynamic classes is also a piece of cake 🍰 .

Let’s go.

I refreshed the app.vue and I have a div with the id “app”. In the style tag, im declaring two different styles — red and blue. ( Super Creative, Ikr? )

You are going to laugh when I tell you how simple this is. You literally just have to do these two steps.

1. Create a data property that holds the name of the class.
2. Assign that property to the element using data binding.

Same way, I'm adding an input field so that users can enter the name of the class.

That’s it. We are done for today. Time to pack our bags. Hope you learned something new.

Please leave a clap on this article — it helps out a lot.

You can also support me by taking a look at my Vue JS Fundamentals for beginners with examples class on Cynohub.

https://cynohub.com/courses/vue-js-fundamentals-course/

Thanks. See ya next time.