CODEWITHSUNDEEP
vue.js
user2903379
user2903379

Reputation: 385

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

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

Upvotes: 1

Views: 2441

Answers (1)

Nathan Wailes
Nathan Wailes

Reputation: 12322

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>

Upvotes: 3

Related Questions