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

最新推荐文章于 2024-07-24 11:09:55 发布

原创最新推荐文章于 2024-07-24 11:09:55 发布 · 5.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#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>