Menu
How to generate dynamic class name?
li v-for='obj in objs' | {{ obj.id }} {{ obj.title }} div id="obj-{{ obj.id }} " style="float:right; color:red;" This sample doesn't work! I need this class name to update the div later!!!
969
Set Dynamic className Values in React All you have to do is wrap JavaScript expressions with curly brackets {} , and everything between these brackets will be evaluated. You can set multiple values to the className attribute. Some of them will be constant, while others will be applied dynamically.
You can use Javascript for adding a class: setAttribute and className both method are used to set class (class attribute), these method are not used to adding another class with existing one.
Use a template literal to dynamically add CSS classes to React elements. Template literals are delimited with backticks and allow us to embed variables and expressions using the dollar sign and curly braces ${expression} syntax. Copied!
In this article, we will see how to dynamically create a CSS class and apply to the element dynamically using JavaScript. To do that, first we create a class and assign it to HTML elements on which we want to apply CSS property. We can use className and classList property in JavaScript.
This helped me.
div :class="['obj-' + obj.id]" style="float:right; color:red;" If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With