【Vue】排他思想

最新推荐文章于 2023-06-12 14:39:58 发布

纵有千堆雪与长街

最新推荐文章于 2023-06-12 14:39:58 发布

阅读量361

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40992225/article/details/126144556

版权

vue 专栏收录该内容

42 篇文章 8 订阅

订阅专栏

<!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;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" :class="{active: index===currentIndex}" @click="itemClick(index)">{{item}}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海尔兄弟', '进击的巨人', '火影忍者'],
                currentIndex: 0
            },
            methods: {
                // 点击后把index传给 currentIndex
                itemClick: function(index) {
                    this.currentIndex = index
                }
            }
        });
    </script>
</body>
</html>

我们来简单分析一下上述代码：
它主要实现是功能是点击哪一个movies就实现那一个movies颜色就变红
它具体是怎么实现的呢？
这就要提到对象语法，class后面跟上的是一个对象。我们可以通过对象的方式，后面跟上布尔值，通过修改布尔值的方式，从而达到动态绑定的效果。
首先我们拿到每个li它的item和index，然后动态绑定class属性，用一个

currentIndex: 0 //记录当前哪一个处于选中状态

每个小li都有自己的index，比如说第一个就是

 <li :class="{active:0===currentIndex}"></li>
 <li :class="{active:1===currentIndex}"></li>
 <li :class="{active:2===currentIndex}"></li>
 <li :class="{active:3===currentIndex}"></li>

而此时我们默认的index就是0，所以默认的第一个movies颜色会变红。即：

 <li :class="{active:0===0}"></li>
 <li :class="{active:1===0}"></li>
 <li :class="{active:2===0}"></li>
 <li :class="{active:3===0}"></li>

只有第一个布尔值为true，所以只有它绑定了active，所以它只会对第一个生效。
之后我们要做的就是监听点击，一旦我们发现了它点击了以后，我们就把点击的这个index赋值给currentIndex，进行一个展示就可以了。

  methods: {
                // 点击后把index传给 currentIndex
                itemClick: function(index) {
                    this.currentIndex = index
                }
            }

此时这个当前点击的小li它的布尔值就为true，这个时候就是点击哪一个那一个就变红。

纵有千堆雪与长街

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】排他思想

我们可以通过对象的方式，后面跟上布尔值，通过修改布尔值的方式，从而达到动态绑定的效果。之后我们要做的就是监听点击，一旦我们发现了它点击了以后，我们就把点击的这个index赋值给currentIndex，进行一个展示就可以了。此时这个当前点击的小li它的布尔值就为true，这个时候就是点击哪一个那一个就变红。首先我们拿到每个li它的item和index，然后动态绑定class属性，用一个。而此时我们默认的index就是0，所以默认的第一个movies颜色会变红。它具体是怎么实现的呢？...
复制链接

扫一扫