[Vuejs]-What's proper method to highlight one element?

by

2👍

✅

Did you try class and style bindings as given in Vue docs?

Ref: https://vuejs.org/guide/class-and-style.html#Object-Syntax-1

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

and your data:

data: {
    activeColor: 'red',
    fontSize: 30
}

That example is a copy-paste from the docs link above. Check it out!

Edited answer after comment #1:

The best way is to use array syntax for class bindings, as follows:

<div v-bind:class="['some-static-class-for-your-data', { 'danger-class' : data2 == 4 }]">
    my data2 value = {{data2}}
</div>

And set a CSS like:

.danger-class {
    color: red;
}

Now whenever your data2 has the value of 4, the ‘danger-class’ will be set on your div. Your CSS ensures that it is displayed in red, or whatever color you choose.

If you have other classes for your data, you can put it as shown in the above example with some-static-class

It is a good practice to set meaningful class names instead of hard-coding styles. So I would not recommend you to go for style bindings, though you can do it if you want. Check out the docs link for class and style bindings.

👤Mani

Leave a comment