如下這個html標簽,最終根據數據返回值是,1則表示男性,2則表示女性,渲染2種不同的icon圖標。
<span class=“gender bg-muted fa-nanxing”></span> <span class=“gender bg-muted fa-nvxing”></span>
有2種實現方法:
1、數組方法
<span :class='["gender","bg-muted",data.gender===1 ? "fa-nanxing" : "fa-nvxing"]'></span>
提示:數組中的gender和bg-muted我這里是要加引號的,因為我這里就是字符串,
如果不加引號的,代表的是data中的一項數據。
2、字符串拼接方法
<span :class="'gender '+'bg-muted '+(data.gender===1 ? 'fa-nanxing' : 'fa-nvxing')"></span>
提示:gender和bg-muted后加一個空格(必須有),原理可以看開始位置的class類名格式,就很好理解。