vue实现点击选中，其他的不选中

最新推荐文章于 2025-06-30 12:25:16 发布

Alice9969

最新推荐文章于 2025-06-30 12:25:16 发布

阅读量9.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 选中

本文链接：https://blog.youkuaiyun.com/Alice9969/article/details/78963798

vue 专栏收录该内容

14 篇文章

订阅专栏

本文通过一个简单的Vue实例展示了如何实现列表项的点击选中效果。当点击某个列表项时，该项变为选中状态（颜色变为绿色），同时取消其他所有项的选中状态。代码中使用了Vue的v-for指令遍历列表，v-bind:class动态绑定样式，以及methods中定义的方法来处理点击事件。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选中效果</title>
    <script src="../static/js/vue.min.js"></script>
    <style>
        ul li.active{
            color: green;
        }
    </style>

</head>
<body>

<div id="app">
    <ul>
        <li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
            <a>
                {{items.text}}
            </a>
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            navList: [
                {text: '首页', isActive: true},
                {text: '简介', isActive: false},
                {text: '活动', isActive: false},
                {text: '联系', isActive: false}
            ]
        },
        methods: {
            activeFun: function(data){
                this.navList.forEach(function(obj){
                    obj.isActive = false;
                });
                data.isActive = !data.isActive;
            }
        }
    });
</script>


</body>
</html>