Vue2 understanding :class attribute

Question

So, I was watching vue2 tutorial, when I found this piece of code which I don't understand why and how it really works.

Here is a style:

<style type="text/css">
    .is-loading { background: red }
</style>

and the html:

<div id="root">
<button :class="{ 'is-loading': isLoading }" @click="toggleClass"> Toggle Me</button>
</div>

and vue code:

new Vue({
   el: '#root', 
   data: {
      isLocading: false
   },
   methods: {
        toggleClass: function(){
            this.isLoading = !this.isLoading;
        }
   }
});

Now, this code toggles the class name for the button when clicked, but what I don't understand is the { 'is-loading': isLoading } part, which does not seem to be a ternary operator.

What exactly is it saying? the class name is already mentioned first as is-loading but the variable appears after it.

Shouldn't this look like { variable ? 'class' ? 'no-class' } in other words, shouldn't the variable appear first, then the class?

I know if adds the classes if isLoading === true but, why does it appear in the order it does? — user7342807
– user7342807, Commented Feb 15, 2017 at 21:02
What appear in the order? What is that thing? The { 'is-loading': isLoading } is an object, :class only check if the property is true and then apply It's name, the class to the element. — Fals
– Fals, Commented Feb 15, 2017 at 23:27
Vue created its own DSL. So you saw HTML, it's actually not. It's a DSL looks like HTML. — jiyinyiyong
– jiyinyiyong, Commented Feb 16, 2017 at 3:40
What I am saying is that, why does it appear from right to left? I mean the evaluation? Almost always, we evaluate expressions as if-true : 'somevalue' but in this case it appears the other way around like somvalue : if-true @Fals — user7342807
– user7342807, Commented Feb 16, 2017 at 20:05

tony19 · Accepted Answer · 2022-07-15 21:19:15Z

4

Vue.js has the ability to run Javascript expressions within all data-binding areas.

This is a little bit of Vue.js magic happening in the background, but you can think of it essentially like this:

Vue sees the : on class= specifying a data-binding
Vue looks to see what's inside of the class= attribute, and sees the following: { 'is-loading': isLoading }
Vue notices it's an object, so it walks through each key/value pair and evaluates it, if the value (isLoading in this case) is true, it adds the key (is-loading) to the class attribute, or not if the value is false.

Vue CAN interpret ternaries within the data-binding syntax, but this is a bit of Vue's internal magic that allows you to easily create multiple UI state variations for a component with very little effort.

edited Jul 15, 2022 at 21:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 16, 2017 at 1:30

K3TH3R

7695 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user7342807 Over a year ago

I still don't understand. Why does this particular code evaluate from right to left? I

K3TH3R Over a year ago

Well, technically, it's not evaluating right to left. Vue sees it's a JS object inside of a class attribute, so it identifies the key is-loading, and then asks what to do with it by looking at the value isLoading.

user7342807 Over a year ago

I understand it now, with that comment. It seems strange a bit strange though, which also means you can't set a class name with value of false hypothetically speaking, since vue will hide everything if it is false.

K3TH3R Over a year ago

Well, you could actually set it as false if you wanted to, you'd just need to make it a string value in the key rather than a boolean: :class={ 'false': isLoading } Modern JS patterns would probably recommend doing something like this though: :class="{ 'is-false': isLoading }

Collectives™ on Stack Overflow

Vue2 understanding :class attribute

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related