小程序点击按钮切换列表元素样式

本文主要是介绍小程序点击按钮切换列表元素样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<view class="header-box">
            <view v-for="(item,index) in list" :key="index" @click.stop="isClickFun(item,index)">
                <text v-if="item.isClick" class="showColor">{{item.name}}</text>
                <text v-else class="offColor">{{item.name}}</text>
            </view>
        </view>

list:[
    {
        id:'0',
            name:'本月',
        isClick:true
    },
    {
        id:'1',
        name:'上月',
        isClick:false
    },
    {
        id:'2',
        name:'近一年',
        isClick:false
    }
]    

methods:{
        isClickFun(item,index) {
            if(item.id==index){
                this.list.forEach((value,idx)=>{
                    if(value.isClick){
                        value.isClick = false
                        this.list[idx] = value
                    }
                })
                item.isClick = true
                this.list[index] = item
            }
        }
    }

// 设置圆角盒子
.header-box {
    width: 100%;
    height: 98upx;
    position: absolute;
    top: 286upx;
    border-top-left-radius:16upx;
    border-top-right-radius:16upx;
    background-color: #FFFFFF;
    border-bottom: 2upx solid #E0E2E8;
    display: flex;
    align-items: center;
}
text {
    padding-left: 60upx;
    font-size: 30upx;
}
.offColor {
    color: #C4C4C4;
}
.showColor {
    color: #000000;
}

运行效果：

 说明：点击时，可切换文字颜色，随便写的只考虑了程序运行的效果，暂未考虑程序运行的效率所占资源等。

这篇关于小程序点击按钮切换列表元素样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！