vue中class類名根據綁定的值三元表達式或字符串拼接動態添加類名

如下這個html標簽，最終根據數據返回值是，1則表示男性，2則表示女性，渲染2種不同的icon圖標。

 

 

 

有2種實現方法：

1、數組方法

 

 

 

提示：數組中的gender和bg-muted我這里是要加引號的，因為我這里就是字符串，
如果不加引號的，代表的是data中的一項數據。

2、字符串拼接方法

 

提示：gender和bg-muted后加一個空格（必須有），原理可以看開始位置的class類名格式，就很好理解。