Vue基础知识练习案例--点击变色

思路：当前点击的li标签和当前标签的索引一样的时候，动态的加上“active”属性；

代码：

<script src="./lib/vue.js"></script>
    <style>
        .active{
            background-color: red;
        }
    </style>
<body>
    <ul id="mylist">
        <li v-for="(item,index) in list" @click="iscolor(index)" :class="current===index?'active':'' ">
            {{item}}
        </li>
    </ul>
    <script>
        new Vue({
            el:"#mylist",
            data:{
                list:["111","222","333"],
                current:0
            },
            methods:{
                iscolor(index){
                    console.log("red",index)
                    this.current=index

                }
            }
        })
    </script>
</body>

结果：

 

 

 

版权声明：本文为a1598452168YY原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。