切换场景：

本文章向大家介绍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>