vue 实现点击元素 改变该元素样式,点击过的元素,样式不移除

在Vue项目中,通常需要实现点击元素时改变样式,而再次点击其他元素时恢复原状。然而,一个特殊需求是点击元素后保持其改变的样式,即使点击其他元素。本文将介绍如何实现这一功能,包括让元素在被点击后维持已更改的字体颜色,以及一种样式切换的效果,即二次点击时恢复元素的初始样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue 实现点击元素 改变该元素样式,点击过的元素,样式不移除

在写项目时 一般的需求都是点击当前元素 改变该元素样式 点击下一个元素 其余元素样式恢复原状,但最近遇到一个需求是,点击元素 改变该元素字体颜色 点击下一个元素 上一次点击过的元素字体颜色还存在。
这里的代码给出两种效果,第一种是类似于a链接的visited效果,二次点击该元素,已经改变过的样式不会再改变。第二种是样式切换效果,二次点击该元素,之前改变的样式移除。

<style>
   .list li {
           cursor: pointer;
           color: #000;
           font-size: 20px;
           font-weight: bold;
           margin-left:20px;
           }
   .active {
           color: red !important;
           }
</style>
<body>
<div id="app">
    <ul class="list">
        <li v-for="(item, index) in list" :key="index" @click="changeStyle(index)" :class="{active: checkedGroup.indexOf(index) > -1}">
            {{item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            list: ['项目一','项目二','项目三'],
            checkedGroup: []
        },
        methods: {
            changeStyle(index) {
                if(this.checkedGroup.indexOf(index) == -1) {
                    this.checkedGroup.push(index); //实现第一种效果只需要这句代码  实现第二种效果就要加上外面的判断条件 
                }else {
                    var spliceIndex = this.checkedGroup.indexOf(index);
                    this.checkedGroup.splice(spliceIndex, 1);
                }
            }
        }
    })
</script>
</body>

点击过的元素,样式改变
点击过的元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值