点击图标使其变色vue

嗯~ o(*￣▽￣*)o这是一个经验总结吧，在写静态页面中我们会发现有很多界面点击以后会出现不同的样式，比如：

点击以后：

那么这个功能是怎么实现的呢？虽然现在可以用ui组件来实现但是ui也不是万能的有时候根据需求的不同还是需要自己写一些样式，那我们来看看这个样式是怎么实现的呢为了容易理解有些样式我会用拼音来代替英文先看看代码吧uniapp：

<template>
    <view>
        <view class="dianjitubiao">
            <view class="box-img" @click="dianji()">
                <image src="https://imagesone.oss-cn-beijing.aliyuncs.com/tupian/dui.png" mode="aspectFit"
                    :class="[showCodeone ?'img-active' : 'img-default']"></image>
            </view>
            <view class="box-text">
                同意客服回访
            </view>
        </view>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showCodeone: false
            }
        },
        methods: {
            dianji() {
                this.showCodeone = !this.showCodeone
            }
        }
    }
</script>
<style>
    .img-default {
        margin-top: 20rpx;
        width: 25rpx;
        height: 25rpx;
        background-color: #9c9d8e;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
    }

    .img-active {
        margin-top: 20rpx;
        margin-left: 40rpx;
        width: 25rpx;
        height: 25rpx;
        background-color: #ff742e;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

 这里的重点就是给class弄一个判断通过判断showCodeone的false或true来确定是否更换样式，给showCodeone的初始值是false，所以样式是.img-default的灰色，当点击以后showCodeone变为true样式变成 .img-active所以就达到了点击变成橙色的效果，嗯~ o(*￣▽￣*)o如果不理解的话可以复制粘贴代码运行一下试试，图片在阿里云盘上面的所以可以实现的。

还有一种情况就是点击的时候边框不仅要变色颜色字体也要变色，就像这种情况：

 点击后：

 这种情况的实现也很简单只是样式中的文字的样式喝边框样式color、border改变了代码如下所示

<template>
    <view>
        <view class="pingjianierong">
            <template v-for="(item1,index1) in box1">
                <view @click="ordes(index1)" :class="[item1.showCode ? 'active' : 'default']">
                    {{item1.text1}}
                </view>
            </template>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                box1: [{
                        text1: '时刻关注细节',
                        showCode: false
                    },
                    {
                        text1: '训练前饮食提醒',
                        showCode: false
                    },
                    {
                        text1: '有效的课后建议',
                        showCode: false
                    },
                    {
                        text1: '时刻关注细节',
                        showCode: false
                    },
                    {
                        text1: '训练前饮食提醒',
                        showCode: false
                    }

                ]
            }
        },
        methods: {
            ordes(index1) {
                this.box1[index1].showCode = !this.box1[index1].showCode
            }
        }
    }
</script>
<style>
    .default {
        border: 1rpx solid #dfddda;
        width: 205rpx;
        height: 45rpx;
        text-align: center;
        border-radius: 10rpx;
        font-size: 22rpx;
        margin-left: 30rpx;
        line-height: 45rpx;
    }

    .active {
        border: 1rpx solid #ff742e;
        width: 205rpx;
        height: 45rpx;
        text-align: center;
        border-radius: 10rpx;
        font-size: 22rpx;
        margin-left: 30rpx;
        line-height: 45rpx;
        color: #ff742e;
    }

    .pingjianierong {
        width: 100%;
        height: 140rpx;
        /* background-color: aliceblue */
        ;
        position: absolute;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        left: 0;
    }
</style>

不理解的也可以复制粘贴运行一下理解就差不多了嗯~ o(*￣▽￣*)o大概就是这样吧当然还有一种情况就是单选的情况那个后面有机会在写吧嗯~ o(*￣▽￣*)o