add class v-if using a conditional

Question

I just want to add a class to a using a conditional. I'm trying this code:

    <template>
  <div class="recipe" v-if="recipe.featured == 'true'" :class="recipe.featured">
    <button class="delete-recipe">
      <img src="@/assets/delete-button.svg" alt="Eliminar" title="Eliminar" />
    </button>
    <h2 class=".recipe-title">{{ recipe.title }}</h2>
    <div class="recipe-image"><img :src="recipe.image" /></div>
    <div class="recipe-info">
      <div class="recipe-info-item">
        <span class="recipe-info-label">Servings:</span>
        <span class="recipe-info-value"> {{ recipe.servings }} </span>
      </div>

I want to add the class "recipe.featured" to the div when recipe.featured props is true. I have json where I have my dates.

The css of recipe.featured is easy. I just want to paint the background. But at this moment is not working.

Any help?

Thanks.

Answer 1

You can pass class conditionally using a ternary operator vue.js documentation

Example :

<div :class="recipe.featured ? 'myFirstClass' : 'mySecondClass'">

If you want to pass a class anyway you can pass it to a different class

<div :class="recipe.featured ? 'myFirstClass' : 'mySecondClass'" class="myClass">

Note: if you don't want to pass a class just put a blank class like* :class="recipe.featured ? 'myFirstClass' : ''