Using V-bind to assign multiple classes has never been easier

Question

Using V-bind to assign multiple classes has never been easier

Is there a way to assign one of two classes to an element based on three possible input variables in my Vue.js code?

<input type='text' class='inputwordtext' v-bind:class="{(wordupload.firstchoice.selected == 'Zinnenlijst') : wordlongwidth, (wordupload.firstchoice.selected != 'Zinnenlijst') : wordshortwidth}">

I want the element to have the class "wordlongwidth" if wordupload.firstchoice.selected is equal to Zinnenlijst. Otherwise, it should have the class "wordshortwidth". How can I achieve this?

javascript class vue.js

Answer 1

Answer №1

If you want to achieve this with just one line of code, you can use a ternary operator like this:

<input 
  type='text' 
  class='inputwordtext'
  :class="wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth'"
>

However, for better readability, it is recommended to create a computed property:

computed: {
  inputClass() {
    let selected = this.wordupload.firstchoice.selected;
    return (selected === 'Zinnenlijst') ? 'wordlongwidth' : 'wordshortwidth';
  }
}

Then simply reference the computed property in your template:

<input type='text' class='inputwordtext' :class="inputClass">

Answer 2

If you want to achieve this with just one line of code, you can use a ternary operator like this:

<input 
  type='text' 
  class='inputwordtext'
  :class="wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth'"
>

However, for better readability, it is recommended to create a computed property:

computed: {
  inputClass() {
    let selected = this.wordupload.firstchoice.selected;
    return (selected === 'Zinnenlijst') ? 'wordlongwidth' : 'wordshortwidth';
  }
}

Then simply reference the computed property in your template:

<input type='text' class='inputwordtext' :class="inputClass">

Answer 3

Answer №2

In the documentation for vue.js, it is recommended to use a ternary expression and combine v-bind:class with your regular class in the following way:

<input type='text' :class="[wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth', 'inputwordtext']">

To find more information about class binds, refer to the vue.js documentation here:

https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

If you want to learn more about ternary expressions, check out this resource:

https://www.w3schools.com/js/js_comparisons.asp

Answer 4

In the documentation for vue.js, it is recommended to use a ternary expression and combine v-bind:class with your regular class in the following way:

<input type='text' :class="[wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth', 'inputwordtext']">

To find more information about class binds, refer to the vue.js documentation here:

https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

If you want to learn more about ternary expressions, check out this resource:

https://www.w3schools.com/js/js_comparisons.asp

Using V-bind to assign multiple classes has never been easier

Answer №1

Answer №2

Similar questions

The results are positive in Postman, however, the browser does not display the same success

Strategies for extracting taginput information from an API

Error: JSON data couldn't be processed due to an unexpected end, resulting in a SyntaxError at JSON.parse()

exploring XML documents

Encounter issue with async function in produce using Immer

PHP object representing a datetime in JSON format

Using the map method in JavaScript, merge two separate arrays to create a new array

Function in head not triggering on OnMouseOver event

How can I convert a string containing integers into an int[] using javascript or jQuery?

Mastering the Art of Parsing Complex JSON Data

Create a custom style for Vue2-Google-Maps autocomplete feature that mirrors the sleek design of Vuetify

`Changing the output of a jQuery .load function`

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

Adjust variable values when the window is resized

What is the best way to flatten object literal properties?

Trying to dynamically filter table cells in real time using HTML and jQuery

What steps should I take to ensure a local HTML page retains the current section that is hidden open whenever it is reloaded?

Retrieving the output from a nested function within a function in a Node.js application connected to a

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

Configuring bitfinex-api-node with Node.js to efficiently handle data from the websocket connection