Vue中给当前点击的li添加类名，移除兄弟元素类名的方法

最新推荐文章于 2023-02-12 21:08:09 发布

小芒果cuty

最新推荐文章于 2023-02-12 21:08:09 发布

阅读量5.8k

点赞数 1

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

csdn@小芒果cuty

本文链接：https://blog.csdn.net/caipital/article/details/108521203

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

要求：使用Vue语法知识实现以下功能，页面上有若干个li标签，默认第一个li文字呈现红色加粗样式，其余每个li最开始都是蓝色不加粗的字体，当鼠标单击某个li时，该标签的文字呈现红色加粗样式，其他li文字呈现蓝色不加粗样式。
在这里插入图片描述
说实话，一开始看到这题，我太亲切了，用JQuery里面this.addClass(‘current’).siblings().removeClass(‘current’)一下不就搞定了吗？
但是题目要拿Vue做，这可怎么办？诶，我还是想抱着试一试的状态，用我根深蒂固的MVC思想，先拿到当前点击的对象再给对象添加类名，于是，有了下面的方案一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
        .current {
            color: red !important;
            font-weight: bold !important;
        }
        .origin {
            color: blue;
            font-weight: normal;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <ul v-for='item in arr'>
            <li @click='handlerLi($event)' :class='origin'>{{item.id}}------{{item.name}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                current:'current',
                origin:'origin',
                arr:[
                        {id:1,name:'尤雨溪'},
                        {id:2,name:'阮一峰'},
                        {id:3,name:'小芒果'}
                    ]
            },
            methods: {
                handlerLi(e) {
                    // console.log(e.target)
                    e.target.classList.add(this.current)
                }
            }
        });
    </script>
</body>
</html>

在第27行中，给handlerLi($event)传了一个$event参数，在第46行，通过e.target获取到当前点击的哪个元素，从而给他添加类名，问题来了，点完当前li再点别的li原先那个li的高亮class我不会取消，所以我点了两下变成了这样：
在这里插入图片描述
点三下就这样：

这样的方法本身就没有运用Vue所提倡的MVVM 思想进行动态数据绑定，再加上实现不了我们的功能，所以我们只能改咯，那看一下方案二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
        .current {
            color: red !important;
            font-weight: bold !important;
        }
        .origin {
            color: blue;
            font-weight: normal;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <ul v-for='(item,index) in arr'>
            <li @click='handlerLi(index)' :class='{current:flag==index,origin}'>{{item.id}}------{{item.name}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                current:'current',
                flag:0,
                origin:'origin',
                arr:[
                        {id:1,name:'尤雨溪'},
                        {id:2,name:'阮一峰'},
                        {id:3,name:'小芒果'}
                    ]
            },
            methods: {
                handlerLi(i) {
                    // console.log(i)
                    this.flag=i;
                }
            }
        });
    </script>
</body>
</html>

第27行和第47行的handlerLi()函数是最核心的代码：
我们把当前的index作为参数传递给了handlerLi()函数，他把当前的index动态绑定给this.flag，那就只有在当前的li中，flag==index才为true，所以当前被点击的licurrent:true，高亮的类才生效。
这里插一句：第36行flag初始值得设为0，因为在页面还没被点击，要渲染页面时，也会判断flag==index，这是第一个index为0，所以第一个li高亮显示。

总结：
这个例子很好的用到了MVVM的思想，你看，当我们数据flag是0（M层）时，V层用flag=0和index自动去做判断，第一行高亮；当点击li时，index发生改变，flag也发生改变，V层自动拿改变了的flag去做判断，当前行高亮。通过v-bind绑定class属性实现双向数据绑定。

小芒果cuty

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Vue中给当前点击的li添加类名，移除兄弟元素类名的方法

要求：使用Vue语法知识实现以下功能，页面上有若干个li标签，每个li最开始都是蓝色不加粗的字体，当鼠标单击某个li时，该标签的文字呈现红色加粗样式。说实话，一开始看到这题，我太亲切了，用JQuery里面this.addClass('current').siblings().removeClass('current')一下不就搞定了吗？但是题目要拿Vue做，这可怎么办？诶，我还是想抱着试一试的状态，用我根深蒂固的MVC思想，先拿到当前点击的对象再给对象添加类名，于是，有了下面的方案一：<!DO
复制链接

扫一扫