vue v-for列表动态绑定class样式

最新推荐文章于 2025-07-24 23:39:43 发布

原创最新推荐文章于 2025-07-24 23:39:43 发布 · 1.8k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #前端

收录于

该博客介绍了一个使用Vue.js实现的简单列表应用。通过`v-for`指令遍历列表项，并结合`v-bind:class`指令动态设置元素的活跃状态。当用户点击列表项时，`liClick`方法更新`currentIndex`，使得被点击项的`active`类激活，改变文字颜色。这展示了Vue.js的响应式数据绑定和事件处理能力。

原理其实很简单，当currentIndex为0时，数组下标0的元素的active为true，其余的为false，所以为true的元素class会生效。

<body>
    <div id="app">
        <ul>
            <li @click="liClick(index)" 
            :class="{active:currentIndex==index}" 
            v-for="(item,index) in list">{{item}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["西游记", "红楼梦", "三国演义", "水浒传"],
                currentIndex: 0
            },
            methods: {
                liClick(index) {
                    this.currentIndex=index
                }
            }
        })
    </script>
    <style>
        .active {
            color: red;
        }
    </style>
</body>