vue for循环中点击显示与隐藏部分数据（独立控制）_vue根据条件隐藏和显示数据

功能

比如后端传过来一组图片，每组图片下面都有一组说明，需要点击每张图片都能独立控制对应图片下面的说明

思路

前端docterList接收后端传过来的数组，然后对docterList做循环处理，每一项添加一个变量isShow(方便独立控制),后通过v-if判断是否显示所需的部分数据

代码

jsp

 <!--for循环docterList-->
       <div class="weui-panels docPanel" v-for="(doctor, index) in docterList" :key="index">
       <div v-if="doctor.schInfo.length >0">
       <div class="weui-panel__bd" >
         <div class="weui-media-box weui-media-box_appmsg">
<!--这边是图片，里面有一个点击函数toggle(doctor)，通过点击图片触发函数，改变isShow的值，从而改变v-if的状态值-->
       		<img :src="'data:image/jpeg;base64,'+ doctor.docImgBase64" style="width: 15vw;" onerror="this.src='${contextPath}/static/css/img/ehealth/img/onlineAppointment.png'" v-on:click="toggle(doctor)">
        <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title"><span class="span1">{{doctor.doctName}}</span></h4>
        <p class="weui-media-box__desc"><span class="span2" style="padding-right:16px;">{{doctor.deptName}}</span>&yen;{{doctor.schInfo[0].price}}</p>
        <p class="weui-media-box__desc"><span class="span2">{{doctor.doctTitle}}</span></p>
       </div>
       </div>
      </div>
 <!--这边通过v-if判断是否显示doctor.schInfo循环中的数据-->
      <div v-if="doctor.isShow">
	  <div class="weui-panel__ft" v-for="sch in doctor.schInfo" v-on:click="docChoose(sch)">
			 <!--在这边写入需要显示与隐藏的数据，比如说图片下的说明-->
	  </div>
	  </div>
      </div>
       </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

js

	methods:{
	//toggle函数改变isShow 的值，this.$forceUpdate()可以防止v-if的判断值变化时，不生效问题出现
  		toggle:function(item) {
			this.$forceUpdate();
      		item.isShow = !item.isShow;
 		 },
 		 //省略其他代码
 		 ........
 	},
	mounted: function(){
		var that = this;
		//省略后端接口
		.......
		//docterList获取后端传过来的数据
				that.docterList=that.docLeftNumHandle(r);
				console.log(that.docterList);
				if(that.docterList.length == 0){
					that.hasDoctor=false;
				}else{
				//foreach循环在docterList里面的每一项添加一个isShow 变量
					that.docterList.forEach((item)=>{
					item.isShow = false;
					})
				}
				console.log(that.docterList);
		//省略其他代码
		.......
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28