在Vue中如何根据条件设置不同的Bootstrap类？

原有写法失效原因 #

你用的是Pug模板语法，这类模板对缩进精度要求极高，如果子节点和父节点的缩进空格数不统一（比如有的用2空格有的用4空格、缩进漏打），就会导致v-if判断逻辑无法正常触发，出现和预期不符的渲染结果。

可行实现方案 #

方案1：修复原有v-if判断写法 #

确保Pug缩进统一，即可正常生效，示例代码如下：

.row
  // isIndividual为true时渲染1个占满整行的列
  .col-md-12(v-if="isIndividual")
    // 此处写列内内容
  // isIndividual为false时渲染两个各占半行的列
  .col-md-6(v-if="!isIndividual")
    // 此处写第一列内容
  .col-md-6(v-if="!isIndividual")
    // 此处写第二列内容

方案2：动态class绑定（更易维护） #

无需重复写列节点的通用内容，修改内容只需要调整一处，代码更简洁：

Pug模板写法

.row
  .col(:class="isIndividual ? 'col-md-12' : 'col-md-6'")
    // 此处写第一列内容
  .col.col-md-6(v-if="!isIndividual")
    // 此处写第二列内容

原生HTML模板写法

如果你用的是Vue默认的HTML模板，写法如下：

<div class="row">
  <div :class="isIndividual ? 'col-md-12' : 'col-md-6'">
    <!-- 第一列内容 -->
  </div>
  <div class="col-md-6" v-if="!isIndividual">
    <!-- 第二列内容 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者Steve