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

Question

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

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

让我们说类vlue应该是imp0等于0，是imp1，imp2，imp3，imp4或importance ，1,2、3或4。

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

答案是：使类的值与单独方法的结果保持同步，该方法在呈现类后也将importance作为输入参数。

所以想知道如何实现此目标？

更新：我成功地使用了三元条件条件：

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

但是想知道是否还有更干净的方法吗？

Answer 1

如果您的映射是直接的，则可以使用简单的表达式让它放手：

:class="'imp' + importance"

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