vue动态绑定样式

如下代码：点击的时候会激活，绑定样式。

 

<template>

    <div>

        <ul>

            <li v-for="(user,index) in userlist" :key="index"

                @click="handleClick(index)" :class="{active:currentIndex==index}"> 

                {{user.name}}

             </li>

        </ul>

    </div>

</template>

<script>

export default {

    data(){

        return{

            userlist:[{"id":1,"name":"zxx"},{"id":2,"name":"zxx1"}],

            currentIndex:-1,

        }

    },

    methods:{

        handleClick(index){

            this.currentIndex = index;

        }

    }

}

</script>

<style lang="less" scoped>

    .active{

        color:blue;

    }

</style>