vue点击哪个index(索引),哪个就改变状态，根据点击改变状态

最新推荐文章于 2023-09-06 22:24:41 发布

abcdefghijk12345636

最新推荐文章于 2023-09-06 22:24:41 发布

阅读量1.2k

点赞数 2

分类专栏： 123

本文链接：https://blog.youkuaiyun.com/hujgg/article/details/115918052

版权

123 专栏收录该内容

38 篇文章

订阅专栏

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

 <script>
        const app = new Vue({
            el: "#app",
            data: {
                movies: ['西游记', '红楼梦', '三国演义'],
                currentIndex: 0
            },
            methods: {
                handler(index) {
                    this.currentIndex = index
                }
            },
        })
    </script>