使用场景如下图,当用户选择对应支付方式的时,切换元素选中状态。
1、现在data中声明type变量,变量值分别是:scorePay与alipay
data() {
return {
type:"alipay"
}
},
2、给需要点击的元素绑定点击事件
<view class="whiteBg pd mt10">
<view class="fz16 bb pb">支付方式</view>
<view class="flex pt" @tap="switchStatus('scorePay')">
<view class="w20 flex ct">
<image class="w100p" src="../../static/waitIssue/integral.png" mode="widthFix"></image>
</view>
<view class="cover ml8">拼团积分</view>
<view class="w40 text-right">
<image v-if="type == 'scorePay'" class="w20 h20" src="../../static/goodsInfo/chooseCur.png" mode=""></image>
<image v-else class="w20" src="../../static/goodsInfo/choose.png" mode="widthFix"></image>
</view>
</view>
<view class="flex pt" @tap="switchStatus('alipay')">
<view class="w20 flex ct">
<image class="w100p" src="../../static/waitIssue/alipay.png" mode="widthFix"></image>
</view>
<view class="cover ml8">支付宝支付</view>
<view class="w40 text-right">
<image v-if="type == 'alipay'" class="w20 h20" src="../../static/goodsInfo/chooseCur.png" mode=""></image>
<image v-else class="w20" src="../../static/goodsInfo/choose.png" mode="widthFix"></image>
</view>
</view>
</view>
3、在mehod中声明这个点击事件
switchStatus(type){
this.type = type ;
},