vue实现点击列表切换颜色

最新推荐文章于 2024-06-04 15:06:16 发布

九州白

最新推荐文章于 2024-06-04 15:06:16 发布

阅读量2k

点赞数 3

分类专栏：前端文章标签： vue 列表

原文链接：https://blog.csdn.net/weixin_43834364/article/details/96493764

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

转载: vue列表点击切换颜色.

vue实现点击列表切换颜色

1.绑定的类名加上三目运算符
2.代码部分

1.绑定的类名加上三目运算符

 :class="activeindex == index ? 'active' : ''"

这样可以判断当前的索引是否是点击的索引，如果是，则变色；不是，则不变

2.代码部分

<!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>
        .active {
            color: red
        }
        li {
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
           <!-- 可用（items,index）取到index -->
            <li @click="changeColor(index)" v-for="(items,index) in movies" :class="activeindex == index ? 'active' : ''">
                {{items}}</li>
        </ul>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "你好",
                movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
                active:'active',
                notActive:'',
                activeIndex:0
            },
            methods: {
                changeColor: function (curIndex) {
                    this.activeIndex = curIndex;

                }

            }
        });
        </script>
</body>

</html>