使用vue+html完成文字与对应的图片切换

<div id="mian">
			<dl >
				<dt><img :src="name[pic]"></dt>
				<dd v-for="(item,index) in name11" :class="{hover:index==bos||index===pic}" @mouseleave="add(index)" @mouseenter="dis(index) " @click="hid(index)">{
  {item}}</dd>
			</dl>
			
		</div>

new Vue({
			el:"#mian",
			data:{
				name:['images/1.png','images/2.png','images/3.png','images/4.png'],
				name11:['数据统计','数据预测','流量分析','广告发布'],
				pic:0,//图片的下标
				bos:0,//背景颜色的下标
			},
			methods:{
				add(index){
					this.bos=index
				},
				dis(index){
					this.bos=""
				},
				hid(index){
					this.pic=index
				}
				
			}
		})

 computed计算属性----方法，针对于dat