Vue中如何通过条件判断实现CSS类名的动态切换？

你的代码存在两处问题：

• 错误地在class属性内使用v-if指令，v-if是用来控制元素渲染/销毁的指令，不能直接写在class属性里
• 三元表达式语法错误，正确格式应为条件 ? 真值结果 : 假值结果，你误用了两个?

下面是几种正确的实现方式：

方式一：Vue动态类的对象语法 #

Vue支持在class中传入对象，类名作为键，布尔值作为值，当值为true时自动添加该类：

<div class="card" :class="{ 'd-block': i === 0, 'd-none': i !== 0 }"></div>

方式二：三元表达式（简洁写法） #

因为d-block和d-none是互斥的，用三元表达式直接返回目标类名更简洁：

<div class="card" :class="i === 0 ? 'd-block' : 'd-none'"></div>

补充：用v-show替代类控制显示隐藏 #

如果你的需求只是控制元素显示/隐藏，也可以直接用Vue的v-show指令，效果和d-block/d-none一致（底层也是通过修改display属性实现）：

<div class="card" v-show="i === 0"></div>

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