根据后端返回来的不同参数值显示不同的class

青旅半醒 2022-10-19 04:08 249阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]  
需求：根据后端返回的不同参数值来显示二维码不同的位置（居中、左上角、左下角、右上角、右下角）

后台返回给我的数字是 1、2、3、4、5，根据数字不同对应不同的class显示不同的位置，本来是用if写的，但是代码量太多，就研究了一下相比之下比较简单的方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 1]  
说明：触发对应的图片来生成对应的海报来控制二维码的位置，如果回来的字段为空，则默认显示居中的状态（三维运算符）！  
![在这里插入图片描述][20210709093054881.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 2]  
如果可以使用v-for来遍历控制更好做，直接拿取数组的应对字段来控制 :class=“locStyle\[imgList.location\_type”

把数字和对应的class写成一个对象，调用的时候，locStyle\[\]里面调用的是你要获取的数字，这样就能获取相对应的class，减少大量的代码量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]: /images/20221005/c9aff44381844fc388493c1016596b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/b2f9c925c63a45b68af570859749d062.png
[20210709093054881.png]: /images/20221005/ccf3ccb38281449882a059e802aa833f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/2c6fed1e4d7647c1894b7e2f450cdebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/12c4e163c7d347ad8ea066aac4f73e66.png