直接上代码吧,关键步骤会备注上面:
<template>
<view>
<view style="position: sticky; bottom: 0; width: 100%; display: flex; height: 174rpx; background-color: #ffffff; border-top: 1rpx solid #F0F0F0;">
<view style=" display: flex; flex-flow: column wrap; justify-content: center; align-items: center; margin-top: 10rpx; width: 50%; height: 94rpx;" @tap="switchImage(true)">
<view style="width: 48rpx; height: 48rpx;">
<image v-if="isBoxSelected" src="/static/image1.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击isBoxSelected=false时的的图片-->
<image v-else src="/static/image2.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击--><!--点击isBoxSelected=true时的的图片-->
</view>
<view style="width: 80rpx; font-size: 20rpx; height: 28rpx; line-height: 28rpx;">
发起申请
</view>
</view>
<view style=" display: flex; flex-flow: column wrap; justify-content: center; align-items: center; margin-top: 10rpx; width: 50%; height: 94rpx;" @tap="switchImage(false)">
<view style="width: 48rpx; height: 48rpx;">
<image v-if="!isBoxSelected" src="/static/image3.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击isBoxSelected=true时的的图片-->
<image v-else src="/static/image4.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击--><!--点击isBoxSelected=false时的的图片-->
</view>
<view style="width: 80rpx; font-size: 20rpx; height: 28rpx; line-height: 28rpx;">
审批中心
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data()
{
return{
isBoxSelected: false,//默认选中第二个盒子
}
},
methods:{
switchImage(e){
this.isBoxSelected = e;
console.log(this.isBoxSelected) //将true和false传入给isBoxSelected
}
}
}
</script>
<style>
</style>
运行效果:
因为默认选中的是第二个所以刚开始isBoxSelected: false, 但是第二个的v-if判断是取反的!isBoxSelected = true 第一个v-if中的表达式就等于 isBoxSelected: false,
点击第一个盒子后:
重复点击同一个盒子是不会改变图片的样式的,比如重复点击第二个盒子,isBoxSelected就一直等于false,但是第二个盒子是取反的!isBoxSelected,所以等于true,第二个盒子就是蓝色图标
也可以怎么说。当isBoxSelected: false时,第二个图表变成蓝色,当isBoxSelected: true时第一个图表变成蓝色