css vue 列表点击变色，再点恢复

最新推荐文章于 2024-08-29 16:29:16 发布

gdyhvy

最新推荐文章于 2024-08-29 16:29:16 发布

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签： css vue

本文链接：https://blog.youkuaiyun.com/gdyhvy/article/details/120337875

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中使用CSS实现列表项点击后变色，并在再次点击时恢复原色。通过结合Vue的双向数据绑定和CSS样式变换，实现交互式的列表高亮效果。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
    <style>
        .first{
            color:red;
        }
        .second{
            color:black;
        }
        .third{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>点击变色，再点变回原来颜色</h1>
    <ul>
        <li v-for="(item,index) in li_value" v-bind:class="getLiClass()" v-on:click="liClick">{{index}}---{{item}}</li>
    </ul>

</div>


<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            li_value:['春种一粒粟','秋收万颗子','四海无闲田','农民犹饿死','锄禾日当午','汗滴禾下土','谁知盘中餐','粒粒皆辛苦'],
        },
        methods:{
            getLiClass:function () {
                return [this.liStyle]
            },
            liClick:function (event) {
                if(event.target.className=='first'){
                    event.target.className='second';
                }else{
                    event.target.className='first'
                }
            },
        },

    })
</script>
</body>
</html>