点击切换图片，样式

切换场景：

本文章向大家介绍uniapp之 点击图片切换，使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

提示：点击时进行角色切换，【图片切换，并且呈现选中效果】

代码展示

提示：将图片换成你自己所用的图片，测试效果

<view class="flex-around">
?? ??? ??? ??? ??? ??? ?<view>
?? ??? ??? ??? ??? ??? ??? ?<image :src="currentImage" mode="aspectFit" class="catimg"
?? ??? ??? ??? ??? ??? ??? ??? ?@click="switchImage('../../static/everday/cert-fill.png')"></image>
?? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ??? ?<view>
?? ??? ??? ??? ??? ??? ??? ?<image :src="currentImage1" mode="aspectFit" class="catimg"
?? ??? ??? ??? ??? ??? ??? ??? ?@click="switchImage1('../../static/everday/certificate-fill.png')"></image>
?? ??? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?</view>

JavaScript中使用的方法：

<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?currentImage: '../../static/everday/cert.png',
?? ??? ??? ??? ?currentImage1: '../../static/everday/certificate.png',
?? ??? ??? ?};
?? ??? ?},

?? ??? ?methods: {
?? ??? ??? ?switchImage(e) {
?? ??? ??? ??? ?this.currentImage = e;
?? ??? ??? ??? ?this.currentImage1 = '../../static/everday/certificate.png';
?? ??? ??? ?},
?? ??? ??? ?switchImage1(e) {
?? ??? ??? ??? ?this.currentImage1 = e;
?? ??? ??? ??? ?this.currentImage = '../../static/everday/cert.png';

?? ??? ??? ?},

?? ??? ?}
?? ?};
</script>

图片的样式：

?? ?.catimg {
?? ??? ?margin-top: 32rpx;
?? ??? ?width: 303rpx;
?? ??? ?height: 200rpx;
?? ?}
?

效果如下：

????????????????????????

? ? ? ? ? ?

简单的切换背景颜色：

????????第一种方法：

????????使用 v-if 和 v-else来写两条div元素，在两个元素上分别设置一个不同的class来实现不同的样式：

<div v-if=" status == '1' " :class="back-red"></div>
<div v-if=" status == '2' " :class="back-blue"></div>

????????css样式：

?/* 红色背景 */

.red{?? ???
?? ?width: 100px;
?? ?height: 100px;
?? ?background-color: red;
}

/* 蓝色背景 */
.blue{?? ??? ?
?? ?width: 100px;
?? ?height: 100px;
?? ?background-color: blue;
}

? ? ? ?第二种方法：

?????????三元表达式结合:class直接在一个div上判断并切换class：（如果状态有多个也可以再后面使用三元表达式嵌套）

<div :class="status == '1'? 'back-red' : 'back-blue'"></div>