vue中class类名根据绑定的值三元表达式或字符串拼接动态添加类名

如下这个html标签，最终根据数据返回值是，1则表示男性，2则表示女性，渲染2种不同的icon图标。

 

 

 

有2种实现方法：

1、数组方法

 

 

 

提示：数组中的gender和bg-muted我这里是要加引号的，因为我这里就是字符串，
如果不加引号的，代表的是data中的一项数据。

2、字符串拼接方法

 

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