添加 class v-if 使用条件

Question

我只是想添加一个 class 到使用条件。我正在尝试这段代码：

    <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>

我想在 recipe.featured 属性为真时将 class“recipe.featured”添加到 div。我有 json 我的约会对象。

recipe.featured的css很简单。我只想画背景。但目前无法正常工作。

有什么帮助吗？

谢谢。

Answer 1

您可以使用三元运算符 vue.js documentation

传递 class 条件

例子：

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

如果您想传递一个 class，您可以将它传递给另一个 class

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

注意：如果您不想传递 class，只需输入一个空白 class，例如 :class="recipe.featured ? 'myFirstClass' : ''

Answer 2

对于布尔值你可以这样做：
v-if="recipe.featured" 如果你想让它有条件地出现或不出现。

这个问题：
<div class="recipe" v-if="recipe.featured == 'true'" :class="recipe.featured">
你说的是class = recipe，只有当recipe featured等于一串true时才会出现，如果等于一串true，它就会出现。

就您的查询而言，您是否尝试过：

<div :class="{ recipe.featured: recipe.featured }"></div>

第一个 recipe.featured 是你的属性，第二个是你的 class。如果您的属性计算结果为真，它将显示 recipe.featured class。如果计算结果为 false，您还可以添加一个替代项，例如：

<div :class="[recipe.featured ? recipe.featured : unfeaturedclass]"></div>

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

可能有很多方法可以实现您的结果，但我希望这对您有所帮助！

添加 class v-if 使用条件

add class v-if using a conditional

vuejs3