昨天做的uniapp的项目,后端返回的一个type字段,
分为type:1或2或3
如果type为1,有对应图片文字,为2有对应图片文字;
之后走了好多弯路,功底尚浅,还得加深!
最终实现方法,我使用计算属性,去监听这个位置,如果type变化,我就有对应的回调
<view class="myvote_item" v-for="(item,index) in dataList" :key="index">
<view class="myvote_title" @click="goEditBuild(item)">
<view class="box_l">
<text>{{item.name}}</text>
</view>
</view>
<view class="myvote_dec" @click="goEditBuild(item)">
<view class="father">
<!-- 进行中 -->
<view
:class="{state2:item.activityType == 2,state1:item.activityType == 1,state3:item.activityType ==3}">
<text v-show="item.activityType == 2">进行中</text>
<text v-show="item.activityType == 1">未开始</text>
<text v-show="item.activityType == 3">已结束</text>
</view>
<!-- 时间 -->
<view class="myvote_box">
时间:<text>{{item.start_time}} </text> <text style="margin:0 6rpx">至</text>
<text>{{item.end_time}} </text>
</view>
</view>
<!-- 浏览、报名、投票 -->
<view class="myvote_box myvote_num">
<view class="myvote_line">浏览:<text>{{item.browse_num}}</text></view>
<view class="myvote_line">报名:<text>{{item.player_num}}</text></view>
<view class="myvote_line">投票:<text>{{item.get_votes}}</text></view>
</view>
//上述进行遍历的数组,里面包含type字段。所以直接item.type就行!
<view class="right">
//图片 <view class="right_img">
<image :src="modelImg(item.type)"></image>
</view>
//文字
<view>
{{modelName(item.type)}}
</view>
</view>
</view>
computed属性监听
computed: {
modelName(a) {
return function(a) {
switch (a) {
case '1':
return '简易投票';
break;
case '2':
return '群投票';
break;
case '3':
return 'pk投票';
break;
default:
return false;
}
}
},
modelImg(a) {
return function(a) {
switch (a) {
case '1':
return '../../static/img3.0/num.png';
break;
case '2':
return '../../static/img3.0/num1.png';
break;
case '3':
return '../../static/img3.0/num2.png';
break;
default:
return false;
}
}
}
},