vue列表渲染点击改变class

 

说明：为何index要+1 数组中第一个元素的下标为0，在==的判断条件下''与0相等

<div class="content">
            <ul>
                <li v-for="(item,index) in singers" class="item" :class="{'active':currentIndex==index+1}"
                    @click="changeClass(index)">
                    {{item}}
                </li>
            </ul>
</div>

 

<script type="text/javascript">
            const app = new Vue({
                el: '.content',
                data: {
                    singers: ['陈奕迅', '周杰伦', '梁静茹', '毛不易'],
                    currentIndex: ''
                },
                methods: {
                    changeClass(index) {
                        this.currentIndex = index+1
                    }
                }
            })
</script>

 

 

<style type="text/css">
            ul {
                list-style: none;
            }

            .item {
                cursor: pointer;
                color: green;
            }

            .active {
                color: red;
            }
</style>