点击切换图片，样式

切换场景：

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