Vue动态绑定class | 类似微信朋友圈功能的实现

<view class="gui-comments-imgs gui-flex gui-rows gui-wrap"
												v-if="item.enclosures">
												<!-- 根据动态图片集合长度动态改变图片显示大小 -->
												<!-- 判断图片数量绑定不一样的图片样式class -->
												<view
													:class="[{'gui-comments-image-gt1':(item.enclosures.length>1)},{'gui-comments-image-lt1':(item.enclosures.length==1)}]"
													v-for="(img, indexImg) in item.enclosures" :key="indexImg"
													@click.stop="showImgs(index, indexImg)">
													<!-- 图片数量大于1，给定image固定高度和margin，这里的行内样式其实我在class里面也写得有，但是不知道为啥绑定的没用，必须写行内 -->
													<image v-if="item.enclosures.length>1"
														style="height:180rpx; margin:5rpx;"
														class="gui-comments-image-pic-gt1"
														:src="img.url" mode="aspectFill"></image>
													<!-- 图片数量等于1，不需要固定高度和margin -->
													<image v-if="item.enclosures.length==1"
														class="gui-comments-image-pic-lt1"
														:src="img.url" mode="aspectFill"></image>
													<!-- 必须加一个view，给定宽度，不然图片会不显示，不知道这是什么bug -->
													<view style="width:190rpx;"></view>
												</view>

mode属性
    scaleToFill 缩放模式（默认属性），不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

    aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

    aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

    当时使用image实现图像自适应的时候，设置mode="aspectFill"

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替class="gui-comments-image-pic-gt1"换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）