Can I use vue.js to change a css class?

Question

I have an MVC project and im using vue for my application form.

<div class="validation-error" ref="message">@Html.ValidationMessageFor(m => m.Title)</div>
<div class="label-container">@Html.LabelFor(m => m.Title)</div>   
<div class="form-control">@Html.TextBoxFor(m => m.Title, new { v_model = "val", @ref = "field" })</div>

which is a text box with a validation message bounded to it. Im wondering if I can change the colour of the text box only if the validation message is active.

I saw the html renders an attribute called aria-invalid="true" so im wondering if I could use v-if or something.

Thanks

tony19 · Accepted Answer · 2022-07-15 22:22:04Z

3

Yes, see the Class and Style Bindings section of the Vue.js documentation.

Here's an example of a class that is enabled or disabled based on the truthiness of a Vue.js variable:

<div :class="{ 'css-class-name': isActive }"></div>

edited Jul 15, 2022 at 22:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 7, 2017 at 9:10

Nathan Wailes

12.6k10 gold badges76 silver badges118 bronze badges

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

Collectives™ on Stack Overflow

Can I use vue.js to change a css class?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related