根据选择器显示相应的内容

选择第一场 一钓区 显示相应的内容

选择器

<!-- <text>场次</text> -->
<picker @change="sessionChange" :value="sessionIndex" :range="sessionArray">
   　　 <text class="uni-input">{{sessionArray[sessionIndex]}}</text>
</picker>
<!-- <text>钓区</text> -->
<picker @change="areaChange" :value="areaIndex" :range="areaArray">
  　　  <text class="uni-input">{{areaArray[areaIndex]}}</text>
</picker>

内容

<view class="manage-msg" v-for="msg in manageMsg" v-if="msg.sessionId==sessionIndex && msg.areaId == areaIndex">
    <view>{{msg.manageName}}</view>
    <view>{{msg.managePhone}}</view>
    <view>{{msg.manageSession}}</view>
    <view>{{msg.manageArea}}</view>
           <view>
        <image :src=" msg.drawsrc ?  yesSrc: noSrc" >
    </view>
</view>

js

data() {
    return {
        sessionIndex: 0,　　
        areaIndex:0,
        sessionArray: ['第一场', '第二场', '第三场', '第四场'],
        areaArray:['一钓区', '二钓区', '三钓区', '四钓区'],
        manageMsg:[
            {manageName:'果冻',managePhone:'123XXXX1123',manageSession:'一',manageArea:'一',drawsrc:true,sessionId:0,areaId:0},
            {manageName:'果冻',managePhone:'123XXXX1123',manageSession:'一',manageArea:'一',drawsrc:true,sessionId:0,areaId:0},
            {manageName:'果冻',managePhone:'123XXXX1123',manageSession:'一',manageArea:'一',drawsrc:true,sessionId:2,areaId:0},
        ],
        yesSrc:'../../static/referee-yes.png',　　　　//图片路径
        noSrc:'../../static/referee-no.png'
    };
},

具体就是给要显示的内容添加一个v-if，sessionIndex、areaIndex是表示选择器中的第几个(从0开始)，