实现图片跟div模块岔开布局

在vue项目中写一个页面使用v-for渲染页面，一开始我写静态文件的时候的思路是把图片跟文字部分的div交换一下位置就可以了，但是后面我在使用v-for渲染上去的时候发现，我这样写我的代码怎么渲染呢，格式不对啊，然后有想过叫后端那边处理一下接口一次传两个分割好的数据给我，我发现这种处理方式太麻烦了，然后就想到了flex布局中的flex-direction属性中的flex-direction: row;和flex-direction: row-reverse，配合css奇偶选择器:nth-child(odd)，:nth-child(even)就轻松实现了效果

 代码如下

.box{width: 800px;}
.box li{width: 100%;display: flex;justify-content: space-around;border-bottom:1px solid red;}
.box li:nth-child(odd){flex-direction: row;}
.box li:nth-child(even){flex-direction: row-reverse;}
.box li img{width: 200px;height: 100px;}
.box .wenzi{width: 500px;height: 100px;}

<ul class="box">
	<li v-for="(item,index) in list" :key="index">
		<img :src="item.imageUrl" alt="">
		<div class="wenzi">{{item.title}}</div>
	</li>
</ul>

list:[
	   {
		    imageUrl:'1.png',
		    title:'学习vue'
	   },
	   {
		    imageUrl:'1.png',
		    title:'学习vue'
	   },
	   {
			imageUrl:'1.png',
			title:'学习vue'
		},
		{
			imageUrl:'1.png',
			title:'学习vue'
		},
	]