时间戳

首页 > 解决方案 > 如何根据多个值在 Vue.js 中选择类？

vue.js - 如何根据多个值在 Vue.js 中选择类？

问题描述

我想选择一个元素的类基于importance：

   <strong> Importance: 
       <span :class="importance ? (calculate class here)">
        </span>  {{someText}}
    </strong>

假设类 vlue 应该是imp0, imp1, imp2, imp3or imp4，这取决于是importance等于 0,1,2,3 还是 4。

您可能会问为什么不在方法函数中计算值？

答案是：保持类值与一个单独方法的结果同步，该方法importance在类渲染后也作为输入参数。

所以想知道我怎样才能做到这一点？

更新：我设法用一个令人费解的三元条件来做到这一点：

 :class="importance==0 ? 'imp0': (importance==1? 'imp1': (importance==2 ? 'imp2': (importance==3 ? 'imp3': 'imp4')))

但想知道是否有更干净的方法可以做到这一点？

标签： vue.js

解决方案

如果你的映射是直接的，你可以用简单的表达式让它去：

:class="'imp' + importance"

...但我强烈建议您至少将其视为技术债务。请记住，您可以在 CSS 选择器中使用任何属性，而不仅仅是类。

推荐阅读