Vue：类的条件渲染答案

【问题标题】：Vue : Conditional render of classVue：类的条件渲染
【发布时间】：2020-05-08 18:32:55
【问题描述】：

我正在使用 vue-bootstrap ，在以下代码类中，当 step===1 但在其他情况下 (!step===1) 我想渲染另一个类。第一个工作正常，其他条件不工作。步骤与向导相关联。谁能帮帮我？

 <div :class="{'d-flex flex-column justify-content-center align-items-center': step === 1, ' d-flex justify-content-center align-items-center': !step === 1  }"></div>

【问题讨论】：

这里step的数据类型是数字还是布尔值？对于这两种情况，step 的实际值是多少？
步骤与向导（ v-stepper ）有关，它们是数字，有 4 个步骤。我想渲染不同的类第 1 步和第 2 步 3 和 4 的另一组。

标签： css vue.js sass bootstrap-vue

【解决方案1】：

对于 if 条件，您正确使用 step===1，但对于 else 条件，您需要使用

step !== 1

这意味着如果step 不等于1，则添加这些类。因此，模板将如下所示：

<div :class="{
   'd-flex flex-column justify-content-center align-items-center': step === 1, 
   'd-flex justify-content-center align-items-center': step !== 1
 }">
</div>

但是对于step===1，您似乎只是添加了flex-column，而其他类d-flex justify-content-center align-items-center在这两种情况下都很常见，因此您也可以试试这个：

<div 
  class="d-flex justify-content-center align-items-center"
  :class="{'flex-column': step === 1}">
</div>

【讨论】：

【解决方案2】：

我的理解是，您需要类似的东西，如果 step 等于 1，则在行中的其他列中对齐项目。您可以如下所示绑定类。

<div 
   :class="step === 1 ? 
        'd-flex flex-column justify-content-center align-items-center': 
        'd-flex justify-content-center align-items-center'">
  ...
  ...
</div>

【讨论】：