Vue：class 的条件渲染

Question

我正在使用 vue-bootstrap ，在下面的代码中 class 在 step===1 时出现，但在其他情况下 (!step===1) 我想渲染另一个class。第一个工作正常，其他条件不工作。步骤与向导相关联。有人可以帮我吗？

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

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

Answer 2

据我了解，您需要类似的东西，如果步长等于 1，则将其他列中的项目对齐到行中。您可以如下所示绑定 class。

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

Vue：class 的条件渲染

Vue : Conditional render of class

css

sass

vue.js

bootstrap-vue